A padding margók kezelése CSS-ben

Tegyük fel, hogy egy elem szélességét 100px-ra állítottuk. A CSS-ben ez egyáltalán nem azt jelenti, hogy az elem valóban 100px széles lesz. Az padding hozzáadása ugyanis kitágítja az elemet, így az nagyobb lesz, mint amit a width tulajdonságban megadtunk.

Nézzünk egy példát. Készítsünk két blokkot, amelyek szélességét 100 pixelre állítjuk. Ugyanakkor a második blokknak adjunk meg padding-ot, az elsőnek viszont ne. Ennek eredményeképpen a második blokk a margó méretével lesz nagyobb:

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

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

#elem2 {
  padding: 25px; /* margók beállítása */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: