Блокові елементи

Блоковим називається елемент, який відображається на веб-сторінці у вигляді уявного прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і починається він з нового рядка.

До блокових елементів відносяться теги <address>, <blockquote>, <div>, <fieldset>, <form>, теги заголовків <h1>,...,<h6>, лінія розділу <hr>, а також теги <ol >, <p>, <pre>, <table>, <ul> та декілька інших, що рідко застосовуються.

Також «блоковим» стає елемент, якщо в стилі для нього властивість display задано як block, list-item або table.

Особливості блокових елементів:
  • Блоки розташовуються по вертикалі один під одним.
  • На прилеглих сторонах елементів діє ефект «схлопування» відступів.
  • Заборонено вставляти блоковий елемент усередину рядкового. Наприклад, код <a><h1>Заголовок</h1></a> не пройде валідацію, правильно вкласти теги навпаки - <h1><a>Заголовок</a></h1>.
  • Ширина блоку складається із ширини контенту (width) плюс ширина полів, кайми, відступів ліворуч і праворуч.
  • Висота блоку складається з висоти контенту (height), плюс поля, кайма блоку зверху та знизу, та відступи зверху та знизу.
  • Якщо поля, кайма та відступи не позначені, то по ширині блоковий елемент займає весь допустимий простір, а його висота обчислюється браузером автоматично, виходячи із вмісту блоку.
  • На блокові елементи не діють властивості, призначені для рядкових елементів, на зразок vertical-align.
  • Текст за промовчанням вирівнюється по лівому краю.
Не всі блокові теги можна вкладати один в інший, тому при створенні структури коду активну роль виконує тег <div> як універсальний блок для верстки документу. Його можна вкладати один в інший, а інші блокові елементи також можна поміщати всередину <div>.

Тег блокового елементу‹div›

<div> - це блоковий елемент, який призначений для виділення фрагмента документу з метою зміни його вигляду.

Можно, наприклад, зробити кольоровий блок з інформаційним текстом, цитатою, або інструкцією.

Основою блоку виступає його контент (це може бути текст, зображення, тощо). Ширина контенту задається властивістю width, а висота через height Навколо контенту йдуть поля (padding) - вони утворюють порожній простір між контентом та внутрішнім краєм кайми блоку. Потім йде власне сама кайма (border) і завершують блок відступи (margin) - невидимий порожній простір до зовнішнього краю кайми блоку.
  
Насправді жодна з цих властивостей не є обов'язковою, в тому числі, і контент, тому ви можете формувати будь-які блоки, що містять комбінації властивостей padding, border і margin, або взагалі обійтися без них.

Поля (padding)

Позначення «поля» слід розуміти як однакове значення полів для всіх сторін. Основне призначення полів - створити порожній простір навколо вмісту блочного елемента, наприклад тексту, щоб він не прилягав щільно до краю елемента. Використання полів підвищує читабельність тексту і покращує зовнішній вигляд сторінки.

Кайма (border)

Кайма блоку - це лінії навколо полів елемента на одній, двох, трьох або всіх чотирьох його сторонах. У кожній лінії є товщина, стиль і колір. Для створення такої рамки застосовується універсальна властивість border, яка одночасно задає всі ці параметри, а для створення ліній на окремих сторонах елементу можна скористатися властивостями border-left, border-top, border-right і border-bottom, які відповідно встановлюють кайму блоку зліва, зверху, праворуч і знизу .

Відступи (margin)

Відступом будемо називати порожній простір від зовнішнього краю рубежу вашої сторінки до початку блоку. Відступи можуть бути зліва, справа або зверху.

Відступи є прозорими, на них не поширюється колір фону або фонова картинка блоку.

Відступи, на відміну від полів, можуть приймати від'ємне (“-“) значення, що призведе до зсуву всього блоку в зазначений бік. Так, якщо задано margin-left: -10px, це перенесе блок на десять пікселів вліво.

Відступи, що задаються у відсотках, залежать від ширини контенту блоку. Це стосується як вертикальних, так і горизонтальних відступів.

Ширина блока

Шириною блоку вважається загальна ширина контенту, відступи до рамочки (кайми), товщина цієї кайми плюс відступи зліва і справа :
  • width - ширина контента, тобто вмісту блока;
  • padding-left и padding-right - поле зліва і справа від контенту;
  • border-left и border-right - товщина кайми зліва і справа;
  • margin-left и margin-right – відступ зліва і справа.
Якщо значення ширини контенту - width не задано, то воно за замовчуванням встановлюється як auto. У цьому випадку ширина блоку буде займати всю доступну ширину вашої сторінки зі всіма збереженими значеннями полів, бордюрів та відступів.

Висота блоку (height)

На висоту блоку діють ті ж правила, що й на ширину. А саме, висота складається із значень висоти контенту (height), полів (padding), кайми (border) і відступів (margin). Якщо властивість height не вказана, то вона вважається як auto і в цьому випадку висота контента обчислюється автоматично в залежності від вмісту.

Разом з тим, попри схожість принципів побудови ширини і висоти, у них є суттєві відмінності. Це стосується того випадку, коли значення width і height не вказано і тоді за замовчуванням воно приймається як auto. Для ширини блоку - це максимально доступна ширина контенту, а для висоти блоку - це висота контенту.

Крім того, значення висоти блоку не можна встановлювати у відсотках. Якщо треба встановити висоту блоку, яка відрізняється від висоти контенту, то вона виставляється в пікселях.

Приклад:

Ніщо не здатне зупинити ідею, час якої настав.

Код виглядає так:

<div style="background: #000000; 
border: 10px solid #ff0000; 
margin-left: 100px; 
padding-bottom: 30px; 
padding-left: 50px; 
padding-top: 30px; 
width: 400px;">
<span style="color: white;"><span style="font-size: 20pt;"> Ніщо не здатне зупинити ідею, час якої настав.</span></span></div>



Якщо блоків треба зробити декілька, то для того, щоб кожного разу не описувати стиль в середині тега, можна виділити стиль у зовнішню таблицю стилів, а для тега добавити атрибут class з ім'ям селектора.

Аналогічно використанню інших блочних елементів, вміст тега <div> завжди розпочинається із нового рядка.

Приклад коду

<style type="text/css">
.block1
{ width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left; }
.block2
{ width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px; }
</style>
<body>
<div class="block1">
Це текст, який ми розміщуємо всередині  першого (сірого) блока. </div>
<div class="block2">
Це текст, який ми розміщуємо всередині другого (жовтого) блока. </div>
</body>


Блоки будуть виглядати так: 


Це текст, який ми розміщуємо всередині першого (сірого) блока.
Це текст, який ми розміщуємо всередині другого (жовтого) блока.