Taandete (padding) kasutamine CSS-is

Oletame, et me määrasime mõnele elemendile laiuse 100px. CSS-is ei tähenda see sugugi, et element on tegelikult 100px laiune. Asi on selles, et padding lisamine laiendab elementi ja see muutub suuremaks kui omaduses width määratud.

Vaatame näidet. Teeme kaks plokki, millele määrame laiuseks 100 pikslit. Samas määrame teisele plokile padding, esimesele aga mitte. Selle tulemusena on teine plokk taande suuruse võrra suurem:

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

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

#elem2 {
  padding: 25px; /* määrame taanded */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: