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