Punimi me padding (hapësirän e brendshme) në CSS

Le të themi se nje elementi i kemi caktuar gjerësi 100px. Në CSS kjo nuk do të thotë se elementi në të vërtetë do të jetë i gjerë 100px. Çështja është se shtimi i padding e zgjeron elementin dhe ai bëhet më i madh sesa është specifikuar në vetinë width.

Le të shohim një shembull. Le të krijojmë dy blloqe, të cilave u caktojmë gjerësi 100 piksel. Në të njëjtën kohë, bllokut të dytë i caktojmë padding, kurse të parit - jo. Si rezultat blloku i dytë do të jetë më i madh për madhësinë e paddingut:

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

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

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

Результат: