Unit

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 16px;
    padding: 8px;
      border: 1px solid black;
  }
</style>
<div class="box">
  ตัวอย่างการใช้ Pixel
</div>

<style>
  div {
      font-size: 16px; /* ลองเปลี่ยนค่าเพื่อดูความเปลี่ยนแปลง */
  }
  p {
      margin-top: 1em;
  }
</style>
<div>
  <p style="font-size: 2em;">
    ข้อความที่ใช้ Ems เป็น 2 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 1.75em;">
    ข้อความที่ใช้ Ems เป็น 1.75 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 1.5em;">
    ข้อความที่ใช้ Ems เป็น 1.5 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 1.25em;">
    ข้อความที่ใช้ Ems เป็น 1.25 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 1em;">
    ข้อความที่ใช้ Ems เป็น 1 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 0.75em;">
    ข้อความที่ใช้ Ems เป็น 0.75 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 0.5em;">
    ข้อความที่ใช้ Ems เป็น 0.5 เท่าของ font-size ของ div
  </p>
  <p style="font-size: 0.25em;">
    ข้อความที่ใช้ Ems เป็น 0.25 เท่าของ font-size ของ div
  </p>
</div>

<style>
  html {
      font-size: 24px; /* ลองเปลี่ยนค่าเพื่อดูความเปลี่ยนแปลง */
  }
  h1 {
      font-size: 2rem;
  }
  p {
      font-size: 1rem;
  }
</style>
<h1>
  ข้อความที่ใช้ Rems จะมีขนาดเป็น 2 เท่าของ font-size ของ root element
</h1>
<p>
  ข้อความที่ใช้ Rems จะมีขนาดเป็น 1 เท่าของ font-size ของ root element
</p>

<style>
  .parent {
  width: 400px;
  height: 400px;
  background-color: lime;
  }

  .child {
    width: 50%;
    height: 25%;
    background-color: orange;
  }

</style>
<div class="parent">
  <div class="child">
    Element มีความกว้าง 50% และความสูง 25% ของ
    Element Parent
  </div>
</div>