Наверх

Особенности CSS: Если внутренние отступы и границы увеличивают размер блока…

...значит вы еще не используете свойство Box-Sizing.

В CSS внутренние отступы (padding) и границы (border) автоматически растягивали блок. Если у вашего блока задана ширина 100%, то с внутренними отступами она станет еще больше и нарушит вёрстку. Чтобы блок был фиксированной ширины при любых значениях padding и border в CSS3 предусмотрено свойство box-sizing.

У этого свойства есть два значения:

  • content-boxпо умолчанию, контент внутри блока будет отображаться по-старому, т.е. например, вместо 100х100 px будет 140х140 px.
  • border-box позволяет вычитать значения padding и border  из ширины и длины блока, т.е. например блок останется с фиксированными параметрами, но область контента уменьшится до 60х60 px.

box-sizing-sample

Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *