Padding and element width - with box-sizing


Sun Sep 20 2020 11:56:04 GMT+0000 (UTC)

Saved by @sailomtaaley #css

<!DOCTYPE html>
div.ex1 {
  width: 300px;
  background-color: yellow;
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.

ต้องกำหนด Box ให้ DIV ก่อน จึงสามารถกำหนดระยะ Padding ได้ถูกต้อง