I am still not clear what does size in em mean?
I have worked px, pt in CSS.
What would 0.8, 1.0 and 1.2 em mean?
I have seen height's in CSS like:
height: 0.8em; or height: 1.2em;
How is it calculated?
What is height in em?
Viewed 55221
7 Answers
An em means "ephemeral unit" it is relative to the current font size of its parent element. For instance, the text in an <h1> heading is 2em by default. This comes from the fact that an <h1> inherits its text size from its parent element, the <body> of the document. If I set my <body> font-size to 16px (font-size: 16px;). My <h1> being 2em would inherit a size of 32px, because 2em is twice the size of 1em. In this case 1em=16px so 2em=2x16px=32px. Now if you create an HTML document with the following
<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
Then you define following CSS rule.
body {font: normal 16px Arial, Helvetica, sans-serif;}
Open the page in a web browser (Chrome) and open the browsers development tools (ctrl+shift+I), you'll see the default font-size for an <h1> is 2em. You will also see on the styles tab that it is "Inherited from body".
While still in the Development Tools for this scenario you can see on the Box Model diagram that the <h1> margin is 21.440px on the top and bottom margins. If you look in the CSS defaults for <h1> you can see the margin-block-start: 0.67em; and margin-block-end: 0.67em; Remember sizing is relative to the font size of the parent element, so 0.67em is relative to the <h1> font size not the font size of the <body>, you can verify this with a little math, 0.67em x 32px=21.440px and this is the size of the margin of the <h1> in the Box Model diagram. For more information try http://www.123webconnect.com/convert-px-em.php
Related