Cara Kerja dengan Padding di CSS
Misalkan kita menetapkan lebar suatu elemen sebesar
100px. Dalam CSS, ini sama sekali tidak berarti
bahwa elemen tersebut benar-benar akan memiliki lebar
100px. Masalahnya adalah, penambahan
padding akan memperluas elemen dan menjadikannya
lebih besar dari yang ditentukan dalam properti width.
Mari kita lihat contohnya. Kita akan membuat dua
blok, yang kita atur lebarnya menjadi 100
piksel. Namun, kita akan memberikan
padding kepada blok kedua, sedangkan yang pertama tidak. Hasilnya,
blok kedua akan lebih besar sesuai ukuran padding:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* atur padding */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
