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...
Jump To... CSS Menu Basic Syntax Selector Types Embedded Stylesheets External Stylesheets Grouping & Nesting Rules Selector Types Specificity Element Types CSS Pseudo-Classes The CSS Box Model CSS Measurement Units Normal Flow in CSS
Element Positioning - Static & Relative Element Positioning - Absolute & Fixed CSS Floats CSS Display & Visibility Z-Index & Opacity Common Style Attributes Legal Color Names
◄ ►