CSS: Units of Measurement

Common Values of Measurement

px :pixel
in :inches
mm :millimeters
em :relative to nearest parent element’s set value (font-size, div, etc)
rem :Root EM, only relative to the root (html) set values
!important :over-ride parent’s presets and enforce preceding values

Example CSS for Illustration
<style>
.sometext {
margin-bottom: -50px;
text-align: center;
font-size: 2in!important;
}

.box {
border-style: dotted;
border-color: red;
border-width: 5px;
text-align: center;
}

.parent-box {
background-color: yellow;
}

.box1 {
background-color: grey;
margin: 20px 10px 20px 10px;
padding: 1.5em
}

.box2 {
background-color: white;
margin: 20px 10px 20px 10px;
padding: 1.5rem
}
</style>
<h5 class="sometext">Some Text</h5>

<div class="box parent-box">
<h5 class="box box1">padding</h5>
<h5 class="box box2">padding</h5>
</div>
Output

Some Text
padding
padding
padding

Leave a Reply

Your email address will not be published. Required fields are marked *