Kufanya Kazi na Vipingamizi padding katika CSS

Acha kwa kipengele fulani tumeweka upana 100px. Katika CSS hii haimaanishi kuwa kipengele kitakuwa na upana wa 100px. Jambo ni kwamba kuongeza padding huongeza kipengele na kinakuwa kikubwa kuliko kiliyobainishwa katika sifa width.

Wacha tuangalie kwa mfano. Wacha tufanye vitalu viwili ambavyo tutaweka upana wa 100 pikseli. Wakati huo huo, kwa kizuizi cha pili tuweke padding, na la kwanza - isiweke. Matokeo yake kizuizi cha pili kitakuwa kikubwa zaidi kwa ukubwa wa kipingamizi:

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

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

#elem2 {
  padding: 25px; /* weka vipingamizi */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: