---
# System prepended metadata

title: 'Q : deference between em or rem ?'

---

# Q : deference between em or rem ?

<div class="boxes">
  <div class="box-boxes">
  </div>
  <div class="box-body">
  </div>
</div>

body {
  font-size: 16px;
}

.boxes {
  font-size: 10px;
}

.box-boxes {
  width: 10em; /* 10 * 10, parent relation */
  height: 10em; /* 10 * 10, parent relation */
  background-color: red;
}

.box-body {
  width: 10rem; /* 16 * 10, body relation */
  height: 10rem; /* 16 * 10, body relation */
  background-color: blue;
}

em parents se relate karta hai.
rem body relation se relate karta hai.