Werk met inkepings padding in CSS

Laat ons sê ons het 'n breedte van 100px aan 'n element toegeken. In CSS beteken dit glad nie dat die element werklik 'n breedte van 100px sal hê nie. Die saak is dat die byvoeging van padding die element vergroot en dit word groter as wat in die eienskap width gespesifiseer is.

Kom ons kyk na 'n voorbeeld. Laat ons twee blokke maak, en aan beide 'n breedte van 100 pixels toeken. Maar aan die tweede blok ken ons padding toe, en aan die eerste een nie. As gevolg daarvan sal die tweede blok groter wees met die grootte van die inkeping:

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

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

#elem2 {
  padding: 25px; /* stel inkepings in */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: