Kerja dengan Padding dalam CSS

Katakan untuk suatu elemen kita tetapkan lebar 100px. Dalam CSS, ini tidak bermaksud elemen tersebut benar-benar akan berlebar 100px. Hal ini kerana penambahan padding akan mengembangkan elemen dan menjadikannya lebih besar daripada yang dinyatakan dalam sifat width.

Mari kita lihat contohnya. Mari buat dua blok, yang kita tetapkan lebar 100 piksel. Pada masa yang sama, kita tetapkan padding untuk blok kedua, tetapi tidak untuk yang pertama. Hasilnya, blok kedua akan menjadi lebih besar pada saiz padding:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px; /* tetapkan padding */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: