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

Изучаем блочные элементы с помощью 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 не стало частью ширины и высоты нашего элемента, поэтому при задании размеров блочным элементам, учитывайте данный момент.


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 29 октября 2014

5 Replies to “Изучаем блочные элементы”

  1. Александр 01.04.2017 at 12:43

    Наверное следующая тема по блокам интересная Это позиционирование и использование свойств присваиваемых блокам в css ;)!

    Ответить

  2. ostinsilver 20.11.2014 at 23:53

    неплохо было указать, что указывая margin и padding просто цифрой, оступы и границы задаются для всех сторон одинаково, для конкретного отступа/границы нужно прописывать друг за другом цифры:
    margin: 10px 15px 10px 15px;
    отступы будут 10 пикселей снизу и сверху, 15 — слева и справа
    так же это можно записать:
    margin-top:10px;
    margin-left:15px;
    margin-right:15px;
    margin-bottom:10px;
    что это что это (margin: 10px 15px 10px 15px;) абсолютно равнозначны, тоже самое касается padding, border

    Ответить

    1. спасибо, для этого отдельную статью сделаю

  3. Недомосквич 05.11.2014 at 14:20

    Здорово, значит нужно будет освоить и эти особенности. Раньше они не так часто использовались, поэтому в своё время упустил их из виду.

    Ответить

    1. да, это из CSS3, там много приколюх появилось и постоянно добавляются

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

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