CSS'te padding dolgularıyla çalışma

Bir elemana 100px genişlik verdiğimizi varsayalım. CSS'te bu, elemanın gerçekten 100px genişliğinde olacağı anlamına gelmez. padding eklemenin elemanı genişlettiği ve width özelliğinde belirtilenden daha büyük hale getirdiği gerçeğidir.

Bir örneğe bakalım. Genişliği 100 piksel olarak ayarlanmış iki blok yapalım. İkinci bloğa padding ayarlayalım, ancak birinciye ayarlamayalım. Sonuç olarak, ikinci blok dolgu boyutu kadar daha büyük olacaktır:

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

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

#elem2 {
  padding: 25px; /* dolguları ayarla */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: