Práca s odsadením padding v CSS

Povedzme, že nejakému elementu sme nastavili šírku 100px. V CSS to vôbec neznamená, že element bude naozaj široký 100px. Vec sa má tak, že pridanie padding rozširuje element a ten sa stáva väčším, ako je uvedené vo vlastnosti width.

Pozrime sa na príklad. Vytvorme dva bloky, ktorým nastavíme šírku 100 pixelov. Pritom druhému bloku nastavíme padding, a prvému - nie. V dôsledku toho druhý blok bude väčší o veľkosť odsadenia:

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

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

#elem2 {
  padding: 25px; /* nastavíme odsadenia */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: