Сегодня я вам расскажу о свойствах, которые формируют в css размеры блока. Если вы думали, что это только width и height, то есть ширина и высота, то вы глубоко заблуждаетесь. Но сначала обо всем поподробнее.
Свойства для задания размеров в css
Итак, для задания ширины и высоты блочного элементу используются два вышеприведенных свойства. Давайте используем их и создадим в html простой блок:
<div class = "red">Какой-нибудь текст в блоке</div>
И применим к нему эти самые свойства + фон, чтобы его было видно.
.red{
width: 300px;
height: 130px;
background: red;
}
Отлично. Но я уже говорил, что это не единственные свойства, которые влияют на размер блока. Теперь давайте рассмотрим подробнее этот вопрос.
Внутренние отступы и рамки и их влияние на размер
Добавим нашему блоку внутренние отступы (padding) слева и справа по 20 пикселей. Это можно сделать такой строчкой:
padding: 0 20px;
Сначала определяются отступы снизу и сверху, а потом — по бокам. Что получается?
Видим, что текст уже не прилегает вплотную к краям блока, а сам он стал шире на 40 пикселей, потому что с каждой стороны добавилось по 20. Соответственно, если бы мы добавили еще отступы сверху и снизу, увеличилась бы также высота элемента.
Теперь давайте добавим рамку блоку.
border: 10px solid black;
Теперь мы видим, что блок стал больше на 10 пикселей с каждой стороны. Из этого делаем вывод, что рамка тоже влияет на величину блока. Как вы помните, изначальные размеры блока были 300 пикселей по ширине и 130 — по высоте. Теперь же вы получите 360 пикселей в ширину и 150 в высоту. Если посчитать все отступы и рамку, то именно столько и получится.
Итог
При верстке сайта вы должны учитывать все это. Если вы указываете размер блока как 100%, после чего назначаете ему отступы или рамку, то в своих реальных размерах он перестанет помещаться в ту область, в которой находится. Чтобы в ширине учитывались отступы и рамки, нужно прописать такое свойство:
box-sizing: border-box;
Это одно из новых свойств в css3, поэтому лучше его прописывать с вендорными префиксами. Что это такое, читайте здесь.
Кстати, внешние отступы (margin) на размер блока уже никак не влияют, они просто определяют расстояние, на которое блок будет отдален от других элементов, близких к нему.
В конце я нарисовал такую схему, чтобы вы четко поняли для себя, какие свойства влияют в css на размер блока.
Что ж, на этом у меня вся информация на сегодня. Учитывайте эти свойства, либо используйте box-sizing.