the box model

Говоря о ширине, мы должны говорить о ней с большой оговоркой, учитывая box model(модель коробки или боксовую модель). Когда вы устанавливаете ширину элемента, элемент может фактически казаться больше, чем вы установили: граница и обивка (border and padding) элемента растянут его за указанную ширину. Посмотрите на следующий пример, где два элемента с одинаковым значением ширины, в конечном результате имеют разные размеры.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}
<div class="simple">

Я меньше...

</div>
<div class="fancy">

а я БОЛЬШЕ!

</div>

Из поколения в поколение, эту проблему решала математика. Авторы CSS всегда указывали ширину заведомо меньшего размера, чем они хотели, вычитывая поля и границы. К счастью, вам не придеться заниматься этой рутиной...

  • Creative Commons License
  • Ads by Bocoup