Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: The em Unit

Thursday, August 15, 2019

CSS: The em Unit

There are often times when you see the measurement in CSS that looks something like this font-size: 2em; what does that actually mean? Well an em simply means its the multiplier of the font-size of the element. For instance 2em means that it will multiply the font-size of the element by 2x.

Let's say we have a div with a font-size of 15px, and there's a span tag with a font-size of 2em.  The span font-size of the span would be 30px, because the span is part of the div element.

Let's say have the following styles:

div {
  font-size: 15px;
}

span {
  font-size: 2em;
}

And with the following HTML markup:

<div>The font-size of the div element. <span>The span font-size</span>.</div>


The output is the following:














As you can see the span font-size is twice as big as the font-size of the div element.  Most people mistakenly think that em means the multiplier of the element size, but it is actually the size of the font of the element.

Here is the entire HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {

                font-size: 15px;
            }

            span {
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div>The font-size of the div element. <span>The span font-size</span>.</div>
    </body>
</html>

Previous: CSS: inherit and initial Keywords

1 comment:

  1. Ace4sure is the website that deals in preparation material for the exam for many years. According to my exposure and research, this is the right platform where you can get exact 220-1001 Dumps Questions.

    ReplyDelete

Search This Blog