Как не учитывать размер border, когда ширина div задана в процентах?

Меня, как у верстальщика, всегда серьезно напрягал тот момент, что толщина рамки в CSS учитывается при формировании ширины блока. Я согласен, что так оно правильнее, но в некоторых случаях, это просто вопиющая несправедливость, которая влечет за собой много дополнительных проблем.

Одной такой проблемой была невозможность для меня сверстать макет с идеально ровным выравниваем блоков по краям. Какой-нибудь блок всегда, да вылезал за края всех остальных. Сглаживало эту проблему то, что “это вылезание” было максимум на 1-2 пикселя и чаще всего заказчик просто не замечал этого. Но лично меня это сильно напрягало.

Это тоже самое, что покупать китайскую подделку швейцарских часов. Вроде выглядит все точно также, но сам то ты понимаешь, что это подделка.

Совсем чуть-чуть теории

В стандарте CSS заложено, что конечная ширина блока формируется из размера padding-отступа, ширины рамки (если у рамки по горизонтали 2 края, то этот размер нужно еще умножать на 2) и ширины текста. То значение width, которое все указывают блоку div и являлось шириной текста. Многие думают, что это ширина блока, но это не так. Именно так думал и я.

В CSS есть инструмент, который позволяет обойти такое положение вещей и позволяет css-параметром width задавать ширину блока без учета отступов и бордеров.

Решение задачи

Для того, чтобы было проще понять вот боевой пример:

<style type="text/css">
  div.noborder { 
      width: 100%; /* Ширина */
      padding: 20px; /* Поля */
      border: 1pz solid black; /* Рамка */
      -moz-box-sizing: border-box; /* Для Firefox */
      -webkit-box-sizing: border-box; /* Для Safari и Chrome */
      box-sizing: border-box; /* Для IE и Opera */
  }
</style>

Параметры -moz-box-sizing и -webkit-box-sizing необходимы для того, чтобы старые версии брузеров Firefox и Safari понимали, что включать ширину рамки и размеры отступов в этом случае не нужно.

Каждый специалист должен ежедневно искать новую информацию в своей области деятельности. Ведь не даром говорят, что жизнь – это движение только вперед. Если вы прожили день и ничего нового из него не вынесли, то будьте уверены, что прожили этот день зря!

P.S. Для меня как для разработчика сайтов на заказ является очень серьезным испытанием – поисковое продвижение сайта. Для меня все эти поисковые системы, SEO – темный лес, который я стараюсь “отдать” другим людям, так как профессионалом человек может быть только в одной, в своей области. Чужого мне не нужно.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: