I have a structure like follows
<div class="panel">
<div class="product">
<div class="title">My little pony</div>
</div>
</div>
and the title div has its font-size set, but so does the panel div.
.panel {
font-size: 0.89em;
}
.product .title {
font-size: 1em;
font-weight: bold;
height: 3.8em;
line-height: 1.2em;
}
When I look at this in the browser it appears that the font-size for the panel class is applying to the title div, firebug does show the panel style as being crossed out but when toggling the font-size on the title div it makes no difference to the size.
If I toggle the panel class font-size then I can see that change that I am expecting.
What is going on here am I missing something obvious?
Note: css has been simplified
Fiddle
The font-size is being overridden (that's why you see it crossed out in Firebug), but it doesn't actually do anything because of the relativity of ems.
1em = the font size of the parent element. In your case, this is .panel with font-size: 0.89em. So setting .product .title's font-size to 1em doesn't affect the outcome.
Formula to calculate em equivalent for any pixel value required
1 ÷ parent font size (px) × required pixels = em equivalent
(Credit: http://v1.jontangerine.com/silo/css/pixels-to-ems/)
Per this formula, to get the desired font size you need to set it to:
1.1235955056179775280898876404494
Note: the browser can't render an umteenzillionth of a pixel so only a few decimal places are actually needed.
Related
Given the following example, I was surprised to find that adding font-size: 1em to a <button> element causes the size of the content to increase
example on codepen: "button font-size 1em increases?"
<p>normal</p>
<p style="font-size: 1em;">normal</p>
<button>normal</button>
<button style="font-size: 1em;">big?</button>
I was expecting the two buttons to be the same size, like the paragraphs. Why is one button bigger than the other?
The default style for the given element in Chrome contains the following:
font: 400 11px system-ui;
Most other browsers have something similar, details left to the reader.
By setting the font-size to 1em, you're setting it to the default font-size inherited from the parent, or if none exist, your browser settings, which by default is 16px.
I font weird behavior if I added font-size to html
html {
font-size: 10px;
}
it will override all font-sizes I have on all html tags and it will make them smaller
I want to keep the font-size on html but I have one div that I won't it to be effected by html font size
Here an example
https://jsfiddle.net/Ldgworje/1/
try to remove the html from CSS and try
I want to keep the font-size for html but I have one div that I don't want it to be effected by html font size
as you see in the example
I hope you can help
This is happening because you are using rem for the font size. rem and em are supposed to work that way. Check https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
If you do not want rating to be affected use px instead.
What you do is you add a rule after that html font rule, and you create an ID for that div and you set font size to whatever:
html {
font-size: 10px;
}
div#fontSize {
font-size: 14px; /*Or whatever size you want*/
}
If you want to leave the font size the same as the default for the div element, then just set it to 1em, as below:
div#fontSize {
font-size: 1em; /*Sets this size to 16px, which is default*/
}
Simple! Just ask if you need any help/explanations/fiddles.
I want the text to be perfectly aligned to the picture. But the text has some room on each side. This is supposed to be shown on different devices so just hardcoding like top : -3 px won't work.
Is there any way to make the text snap to the top of the div.
The blue area is the selection overlay that shows the div when I hover over the html element chrome inspect:
<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
<div class="medium-title">Title</div>
<div class="small-text">Some text</div>
</span>
.medium-title {
font-size: 17px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.small-text {
font-size: 14px;
}
img {
float: left;
}
JSFiddle: https://jsfiddle.net/fx314qhh/
top:-3px won't work because it deals with positioning. More than likely you probably need to use padding-top:-3px;. If that doesn't, we'd need to see code because it is impossible to answer by looking at a picture
Try
line-height: 0
And adjust the margin-top: value.
Or a lower line-height value. (e.g., 1em line-height would be relative to the font-size as 1:1em)
Sicking to px in this scenario is your best bet for cross browser consistency.
Without code, it's going to be hard to identify the exact issue, but lets give it a shot.
All text has something called line-height which is the amount of space from the top of the font to the bottom of the font. Most fonts build in padding along the top to make multiple lines of text readable. CSS allows us to adjust that.
p {
line-height: 14px;
}
This code will tell all <p> elements to have a total line-height of 14px. If your font is taller than 14px it will overlap.
If this doesn't fix your problem, then the issue probably has to do with the margin/padding.
Try:
.medium-title {
font-size: 17px;
line-height: 0.8;
}
https://jsfiddle.net/fx314qhh/1/
I am currently designing a web page with em units. I guess I don't understand it as well as I thought I did because a problem has occurred while I tried to align two separate span tags with margin-left. They were placed in the upper-left corner of my header. They were positioned on top of one another using display:block. When I used margin-right to align both the span tags, the larger span and the smaller tag didn't align correctly. I used the same number for margin-right, but they were still messed up.
Is this because I'm using em's?
How can I fix this?
I will paste the code I'm using below so you'll get a sense of what I'm working with. Hopefully I've explained this well enough.
HTML
<div class="header1">
<span class="title">Title goes here</span>
<span class="subtitle">This is the subtitle</span>
</div>
CSS
body {
color: #333;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 62.5%; /* 10px */
line-height: 1.28;
}
.main1 {
width: 96em;
/* horizontally center the website layout */
margin: 0 auto; margin-top: .8em;
text-Align: left; /* override body {text-align:center} */
}
div.header1 {
clear: both;
width: 100%;
height: 9em;
background: #ff0000;
color: #fff;
}
.title {
font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
.subtitle {
font-weight: lighter;
font-size: 1.4em;
}
The description of the problem is very confusing and does not explain what you want to achieve and what is your best attempt at that. You refer to left and right margin, but neither of them is set in your code for the elements discussed. You refer to setting display: block, but there is no such setting.
I will assume that you want the main title to appear (in the xy plane) above the subtitle. For this you need to set display: block or, better, use div markup instead of span or, best, use adequate heading markup such as h1 and h2 with due consideration of their default effects on vertical margins and font weight (i.e., overriding them in CSS if needed). And I assume that you wanted them left-aligned the same amount.
It seems that you did not take into account the relativity of the em unit. By definition, it equals the font size of the element (except in font-size, where it equals the font size of the parent element).
I suspect that you tried setting the left margin of both span elements using the same value such as 1em. But it does not mean the same for both elements, since their em sizes differ. If you wanted to set the their left margins to, say, the font size of the first element, you would set
.title { margin-left: 1em; }
.subtitle { margin-left: 2.6429em; }
The number 2.6429 is the ratio of the font sizes, calculated from 3.7/1.4.
It would be easier to just set a left margin on the enclosing div element. Its font size equals the font size of the body element, so if you wanted to set it to the font size of the main heading, you would use
div.header1 { margin-left: 3.7em; }
check the bellow link I hope this will help for you
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
px: pixels (a dot on the computer screen)
em: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
see the reference
So, you can use px instead em, its good practice.
Hope it will helps you. Thanks. !!
When I have two line of text with different font-size, they overlap.
Look at this example :
http://jsfiddle.net/3WcMG/1/
All the 'j' and 'g' are hiding the to of the second line. It does that with all main fonts.
Why Does it acts like that? What can I do to avoid that?
EDIT: I know what's 'em' means, I know how to use the margins, I know how to increase the line height, I know what is the effect of the reset css of JSFiddle and that is not my question. My question is: Why the bottom of the 'j' is out of the box of the text? It looks like if I put negative margin-top on the second line (except that I haven't, it looks like that by default).
Is there a way to make the font fit in the box.
EDIT2: It seems that it is a browser issue! I am on chrome 21.0 on Mac and I see that :
1em is equal to 1 times the number of pixels in a font size. So if your font-size is 60px, 1em = 60px. If it is 14px, 1em = 14px, and so on. Setting the line-height to 1em makes it equal to 1 times the number of pixels.
There may be some confusion because the default line-height set by the user agent stylesheet is usually somewhere around 1.5em, so a 12px font-size would result in an 18px line-height.
em unit
Equal to the computed value of the ‘font-size’ property of the
element on which it is used
Source: http://www.w3.org/TR/css3-values/#font-relative-lengths
See also: http://www.w3.org/TR/CSS21/syndata.html#length-units
Based on this, your original example is exactly what I would expect to see. For reference, here is what I see in Chrome:
Your first line is 60px tall, but the computed value (W3's term) of the second is 14px (dictated by the class applied to it). Both have a line-height of 1em. Thus, the line-heights are 60px and 14px respectively. Since that is the same as the font sizes, the two lines touch (this can vary from font to font).
If you are seeing overlapping behavior, that's a different problem.
To change the behavior, you can use a different line-height, padding, margin, etc. As a side note, rem units may be more intuitive though support is lacking in older browsers.
For an overview of CSS units, see: http://css-tricks.com/css-font-size/
Fonts not aligned with edges of box
Updated Question/Problem
With regards to the updated question, see: http://www.w3.org/TR/css3-fonts/#propdef-font-size which states that:
Note that certain glyphs may bleed outside their EM box.
This happened in varying degrees with different fonts that I tried (some bleed both X/Y, some in one direction, some not at all).
I'm not sure there is any way to change this behavior, especially since each browser may use a different algorithm for anti aliasing which can slightly alter the edge of the character.
I think line-box-contain: glyph may be relevant, but I only see it mentioned in an editor's draft and I'm sure browser support is absent/inconsistent.
http://dev.w3.org/csswg/css3-linebox/#line-box-contain
Increase the line height in your CSS
line-height: 2em; (From 1 to 2em)
Which is in the p element.
You can give your "test" class line-height or margin-top whatever you feel comfortable with.
.test{
font-size: 14px;
line-height:18px;
}
The default line height is relative size, 150% of the font size in a p for example. If you change line height using em or %, the browsers will interpret that as "em/% compared to the font size."
http://jsfiddle.net/P7LaP/
<div class="small">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
<div class="large">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
The example has three sets of three p tags with normal height, short, and tall. While the three sets are the font size.
p {
color: ffffff;
background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }
I hope this helps. I'm not sure exactly what you're trying to do, but it looks like you should just delete the line-height line from your stylesheet.