em Units - The Pitfalls

<html>
   <head>
     <style>
       .emmain{
         position:absolute;
         border-style:solid;
         left:38em;
         top:8em;
         height:21.1em;
         font-size:1em}
        .one,.two,.three{
         padding-top:0.45em;
         border-bottom-width:0.05em;
         height:6.5em;
         background-color:blue}
        .two{
         background-color:green;}
        .three{
         background-color:red;
         font-size:0.8em}
     </style>
   </head>
   <body>
   <div class="emmain">
        <div class="one"></div>
       <div class="two"></div>
        <div class="three"></div>
      </div>
   </body>
</html>

The container div, emmain has a client height of 21em
The .one,.two,.three definition gives a total height requirement of 7em
per contained element
The redefine .three changes the height of the third element.
In order to occupy a height of 7em in its parent we must scale by 0.8:
- The height should be 6.5/0.8 = 8.125em
- The top padding should be 0.45/0.8 = 0.5625em
- The bottom border should be 0.05/0.8 = 0.0625em

▼Jump To...

◄ ►