Изучаем блочные элементы

Изучаем блочные элементы с помощью CSS-свойств

Добрый день, в данной статье рассмотрим CSS-свойства, влияющие на ширину и высоту блочных элементов.

• height:
• width:
• margin:
• padding:
• border:

Перед и после блочного элемента, браузер автоматически ставит перенос строки, также по-умолчанию блочный элемент занимает всю ширину родительского элемента. В учебнике по HTML, вы можете посмотреть на теги, которые создают блочные элементы.

Допустим нам нужно создать блок div, который должен иметь ширину 200px, высоту 100px и фон зелёного цвета с синим оттенком:

div {
 width: 200px;
 height: 100px;
 background: #084;
}
<div>Блочный элемент</div>

Добавим нашему элементу, границу border насыщенного-голубого цвета #08a и шириной в 15px:

div {
 width: 200px;
 height: 100px;
 background: #084;
 border: 15px soild #08a;
}
<div>Блочный элемент</div>

Ширина нашего элемента div станет 230px

Отсюда следует вывод, что CSS-свойство border, увеличивает уже имеющуюся высоту и ширину.

Рассмотрим другие CSS-свойства, которые делают тоже самое, это margin (внешний отступ) и padding (внутренний отступ).

Сначала приведем пример с CSS-свойством padding, сделаем его размеры 15px.

div {
 width: 200px;
 height: 100px;
 background: #084;
 border: 15px soild #08a;
 padding: 15px;
}
<div>Блочный элемент</div>

Теперь ширина элемента стала 260px.

Добавляем CSS-свойство margin со значением 15px.

div {
 width: 200px;
 height: 100px;
 background: #084;
 border: 15px soild #08a;
 padding: 15px;
 margin: 15px;
}
<div>Блочный элемент</div>

Ширина блочного элемента станет 290px.

Данные нюансы, видоизменяя высоту и ширину, частенько мешают в вёрстке сайтов. Поэтому чтобы ширина и высота была стабильной, например всегда оставалась 200px в независимости от размеров CSS-свойств border, padding или margin, нужно нашему элементу присвоить CSS-свойство box-sizing, со значением border-box.

div {
 width: 200px;
 height: 100px;
 background: #084;
 border: 15px soild #08a;
 padding: 15px;
 margin: 15px;
 box-sizing: border-box;
}
<div>Блочный элемент</div>

Как мы видим размеры свойств границ border и внутренних отступов padding, стали частью изначальной ширины 200px и высоты 50px блочного элемента.

А вот CSS-свойство margin не стало частью ширины и высоты нашего элемента, поэтому при задании размеров блочным элементам, учитывайте данный момент.

• Category: Разное