Based on my understanding of line-height and box model calculations, I believe that the height of an element, margins and all, is the sum of the following:
margin-top
border-top
padding-top
line-height = font-size * numeric line-height multiplier
padding-bottom
border-bottom
margin-bottom
However, when I implement this myself, as shown in this fiddle, everything looks good in Firefox and in Chrome except for the line-height.
.btn {
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid darkred;
padding: 6px 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
}
Mathematically, my font-size (14px) multiplied by the line-height (1.42857) should yield 19.99998px, which effectively rounds to 20px. However, in Firefox the resulting line height is 22px, and in Chrome the resulting line height is 19px. What is accounting for this discrepancy? Why am I not getting the expected 20px line height?
Inexplicably, Bootstrap buttons appear to correctly yield 20px for the same concept in Firefox and in Chrome. I hope someone can help me understand why and how Bootstrap accomplishes this feat.
The line-height is not multiplied with the font size setting, it's multiplied with the actual size of the font as rendered.
The actual size of the font is based on the font size setting, but it differs a bit depending on the font used, the font implementation, the operating system, font rendering settings, et.c.
Setting a font size like 14px doesn't mean that the text ends up exactly 14 pixels high, rather something that is supposed to look like 14 pixels high, depending on the settings in the font. Some fonts may for example be more narrow and thin, so it would need to be rendered slightly larger than other fonts to seem like the same size. This is up to the discretion of the font designer, so it may differ somewhat from what you feel would be correct.
Also, font sizes for the graphics software are measured in points, not pixels. When you specify a size in pixels, that is translated to a point size that would give approximately that size in pixels. There is some rounding going on there, and the exact algorithm differs between browsers, so that gives a little variation.
Related
so I though about using svg files for icons.
for e.g. like this
.icon-page{
background-image: url("../../layout/icons.svg");
background-size: 2em 2em;
}
I would like it to scale with the font-size of the user, which is why I figured I use em.
But if the users default font-size is something like 23px or so, the svg is all blurry because the icons can not fit perfectly into the pixels. Is there a way to get around that? Can I detect the users font-size with a mediaquery and set the icon font-size to a certain value to make sure the icons look okay?
Comparison 22px (bad/blurry) to 24px (correct)
Demo: http://jsfiddle.net/TgHLf/17/
What is the meaning of '2em 10px' in css property value?
Example: margin: 1em 40px;
margin accepts one to four arguments:
One single value applies to all four sides.
Two values apply first to top and bottom, the second one to left and right.
Three values apply first to top, second to left and right and third to bottom.
Four values apply to top, right, bottom and left in that order (clockwise).
you can read the detail here
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
1em is for top and bottom margin
40px is for left and right margin
1em is equal to the current font size
it could also be written like
margin-top: 1em;
margin-right: 40px;
margin-bottom: 1em;
margin-left: 40px;
or even another way like
margin: 1em 40px 1em 40px;
so if the current font size is 24px then the margin would be the same as
margin: 24px 40px;
but lets say the computer user zooms in on their screen 200% then the margin would be
margin: 48px 40px;
According to W3 Org, units definition, "em" is defined as
"The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as 'text-indent: 1.5em' and 'margin: 1em' are extremely common in CSS. "
while "px" is defined as:
"The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use. "**strong text**
I don't know how much is the default font size, but anyway I want to reduce it by 2px.
<td style='width:30%; margin:0 5%; text-align:left;vertical-align:top;font-family:Tahoma, Arial, Helvetica;' font-size:'xx'>Some text</td>
What to assign the font-size attribute so that my text will be 2 pixels smaller. Thanx.
If you really truly want to have it 2px smaller, and you're happy to accept this'll only work on modern browsers:
font-size: calc(1em - 2px);
References:
Compatibility information at caniuse
Documentation at mozilla, or w3c
What you want is to use em's instead of pixels. Em's are represented in percentages relative to everything else so
font-size: .8em;
Would make it 80% of the size as the text around it.
See http://www.w3schools.com/cssref/css_units.asp for a good explanation on CSS units.
The problem is that Firefox and WebKit based browsers seem to align text vertically in different ways when contained in an element that has an even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar threads, but I haven't really seen any great explanations for my question.
Consider the following example:
.box {
font-size: 15px;
font-family: Helvetica, Arial;
background-color: Blue;
height: 20px;
width: 60px;
color: White;
line-height: 20px;
}
<div class="box">
A text.
</div>
Is there any way to fix this? Is there any "text-align" property or something that I missed?
This is due to differences in how browsers handle subpixel text positioning. If your line-height is 20 pixels but font-size is 15 pixels, then the text needs to be positioned 2.5 pixels from the top of the line box. Gecko actually does that (and then antialiases or snaps to the pixel grid as needed on painting). WebKit just rounds positions to integer pixels during layout. In some cases, the two approaches give answers that differ by a pixel. Unless you're comparing them side-by-side, how can you even tell there's a difference?
In any case, making sure that your half-leading is an integer (i.e. that line-height minus font-size is even) will make the rendering more consistent if you really need that.
This is browser rendering issue. Use line-height 1px less than the given height, for example:
.box
{
background-color: Blue;
color: White;
font-family: Helvetica,Arial;
font-size: 15px;
height: 18px;
line-height: 17px;
width: 60px;
}
If you are looking for a way to do an exact vertical align, check out Stack Overflow question Problem with vertical-align: middle; - I described a solution there.
If you want an answer why Firebug and Chrome display this differently, this will be a bit more complicated. Line-height alignment is based on font-line rendering and fonts can be handled in a very different way across the browsers. For example, font-smoothing and font-weight can really mess with your page.
Also, are you using CSS reset for this page? It contains font related adjustments as well, and it may help you to overcome cross-browser issues. Refer to CSS Tools: Reset CSS.
Ugh, terrible but true! I just ran into this trying to create tiny count bubbles on an icon - so small that I had to get right next to text so every pixel counted. Making the line-height 1x less than text-size leveled the display field between FF and Chrome.
Im using Lucida Grande font for my site and when I put the font-size large, say 30px, the fonts in the two adjacent lines overlap upto some extent. How can I put a gap between the two lines using CSS?
Use the line-height property. Something like
p {
line-height: 1.3em;
}
Should do. This will give you line height 1.3 times the font-size you set. You probably have this set to a fixed number, like 25px in another ruleset or stylesheet, thus when you increase the font-size the line height does not increase with it.
You probably have a fixed line-height set. Change it to be either relative (e.g., line-height: 1.3em;) or fixed, but larger (30px).
/*
user same line-height as as font-size;
*/
.product{
font-size:30px;
line-height:30px;
}
/*
its always a better practice to define line-height in body if you are going to use same font size across or as standard
*/