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**
Related
Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
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.
I wrote two years ago a design: the goal was to fit in a 1024px screen, but have a bit of extra graphical content so that it doesn't appear to be too small on larger screens. The result is http://megaglest.org/, the website of an open source project.
Here's the HTML: I don't want to use an img tag since it will enable me to work on a responsive design where such images won't be loaded:
<div id='all'>
<div id="header">
<div id="header_left"></div>
</div>
</div>
Here's the corresponding CSS:
#all {
width: 1016px;
margin: 0 auto;
}
#header {
height: 313px;
background-color: #4dd;
}
#header_left {
float: left;
width: 140px;
margin-left: -140px;
height: 379px;
/* works fine */
/* background: #dd4; */
/* there's a one pixel offet */
background:
url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
no-repeat;
}
Only on Google Chrome (22.0.1229.94 on Linux), and only at certain window sizes (when only part of #header_left is visible), I get an offset one pixel between the image and the blue header. It's possible to see using this jsFiddle when the "result pane" is very wide: http://jsfiddle.net/hTbJA/
Here's a screenshot of the issue. What's weird is that the Google Chrome developer tools say in "metrics" that the div is 140px wide, but then when I use the "Elements" pane and hover #header_left, it says 141px! Could it be a browser bug?
Thanks.
The issue is being caused by the fact that you have your #header_left object and your #header_right object pushing out past the edges of the center line with negative margin - but the center piece having a horizontal margin set to auto.
What's happening is that when the body is an even number of pixels wide - auto makes the #header, which is 1016px wide, center with an even number of pixels on either side, due to the margin: 0 auto; (example: if body is 1200px wide, there are 184px available, so the browser allocates 92px on the left, and 92px on the right. Your #header_left, then, gets a margin-left: -140px; rule - which puts it 140px to the left of the left-edge of the #header, and it lines up pixel-perfect.
When the body is an odd number of pixels wide, however, say 1199px - and the margin: 0 auto; kicks in, a partial pixel is allocated (in this case yielding only 91.5px per side). Because an object can't be drawn in half a pixel - the browser rounds up for the actual location at which to start rendering #header - and the left-edge is calculated at 91.5px. When your margin then goes -140px on the #header_left element, you wind up on another odd pixel - but this time, the calculation rounds down. (The internal math is probably calculated by first rounding - then subtracting).
This gives you the appearance of 1 pixel off...
The fix - in your scenario - is to change your #header_left's margin-left CSS rule to -139px instead of 140px - and allow a slight overlap. I've tested it with your actual site - and it looks fine and blends nicely.
So - in answer to your question - no - this is not a bug, per-se - it just means that the developer tools and the elements pane calculate differently. One of them rounds up and one rounds down when dealing with partial pixels. Or perhaps one is measuring what is actually rendered effectively on the screen, and the other measures what the CSS rules are indicating.
I've created an image of the result I want for a couple of input fields.
What I've tried to get that result is this:
input {
padding-left: 2px;
padding-top: 2px;
height: 1.8em;
font-size: 1em;
}
The problem I'm having in creating this is any time I resize the text so it is relatively smaller than the input field, the height of the input field changes accordingly as well, it doesn't appear to be paying any attention to the height attribute, only font-size.
I want the text to end up at about 60% the height of the input field, and as above, quite close in to the bottom left corner.
Can someone point me in the right direction for this?
em is based off the size of the font (the point size), so if you change the font-size, the height (as you have specified it) will change. Use pixel height if you want it independent of font-size.
If I give a line-height to a block element like h1 it adds the space above and below the each text line, that means the element does not begin on the same top position. What if I just want a spacing below each line? I know that vertical-align does only work with inline-elements.
I also recognized that a text of a block element like a p tag is not on top with line-height "normal", by default. If I add a background-color to the element, the colour is also visible a few pixels above the text. Why?
TLDR: Use position: relative and a negative top value to fake it.
Explanation: You're right. Line-height is always added above and below each character. So if your font-size is 12px and you have a line-height of 18px, you'll get 3px above and 3px below each "line". Each of those 3px spaces is called a "half-leading".
However, you can use position: relative with a negative top value to make it seem like there is only space added beneath each line.
So lets say you wanted to have 8px of space between each line instead of just 6px from the example above (18px/12px = 6px = 3px on top + 3px on bottom) . To do this, increase the line-height from 18px to 20px to make the half-leading 4px and give a total of 8px of space between lines. Then add position: relative; top: -2px to bump the line back to same place it was when the line-height was 18px.
Even though the browser is still adding 4px of space above and below each line, the negative vertical positioning will make it seem like that extra top spacing was cut off.
What if I just want a spacing below each line?
I don't really see how the accepted answer is any better than this, for most cases:
margin-bottom: .5em
The important thing is to use em since is will be based on the current font size.
In addition note that if the text wraps to two lines and you're using line-height: 2 then you'll end up with a huge gap between the lines. Then you're almost certainly better off using margin-bottom with a default line-height.