Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

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

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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 29 Окт 2014
Статья обновлена: 5 Фев 2016

4 комментария на «“Изучаем блочные элементы”»

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

  2. неплохо было указать, что указывая 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

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget