Блоковим називається елемент, який відображається на веб-сторінці у вигляді уявного (невидимого), або видимого прямокутника. Такий елемент займає всю доступну ширину, висота елемента визначається його вмістом, і починається він з нового рядка.
Основою блоку виступає його контент (це може бути текст, зображення, тощо). Ширина контенту задається властивістю width, а висота через height. Навколо контенту йдуть поля (padding) - вони утворюють порожній простір між контентом та внутрішнім краєм бордюра блока. Потім йдуть власне самі бордюри (border) і завершують блок відступи (margin) - невидимий порожній простір до зовнішнього краю бордюрів.
До блокових елементів відносяться теги <address>, <blockquote>, <div>, <fieldset>, <form>, теги заголовків <h1>,...,<h6>, лінія розділу <hr>, а також теги <ol >, <p>, <pre>, <table>, <ul> та декілька інших, що рідко застосовуються.
Також «блоковим» стає елемент, якщо в стилі для нього властивість display задано як block, list-item або table.
Особливості блокових елементів:
Насправді жодна з цих властивостей не є обов'язковою, в тому числі, і контент, тому ви можете формувати будь-які блоки, що містять комбінації властивостей padding, border і margin, або взагалі обійтися без них.
Поля (padding)
Позначення «поля» слід розуміти як однакове значення полів для всіх сторін. Основне призначення полів - створити порожній простір навколо вмісту блочного елемента, наприклад тексту, щоб він не прилягав щільно до краю елемента. Використання полів підвищує читабельність тексту і покращує зовнішній вигляд сторінки.
Бордюри (border)
Бордюри блоку - це лінії навколо полів елемента на одній, двох, трьох або всіх чотирьох його сторонах. У кожній лінії є товщина, стиль і колір. Для створення такої рамки застосовується універсальна властивість border, яка одночасно задає всі ці параметри, а для створення ліній на окремих сторонах елементу можна скористатися властивостями border-left, border-top, border-right і border-bottom, які відповідно встановлюють бордюри блоку зліва, зверху, праворуч і знизу .
Відступи (margin)
Відступом будемо називати порожній простір від зовнішнього краю рубежу вашої сторінки до початку блоку. Відступи можуть бути зліва, справа або зверху.
Відступи є прозорими, на них не поширюється колір фону або фонова картинка блоку.
Відступи, на відміну від полів, можуть приймати від'ємне (“-“) значення, що призведе до зсуву всього блоку в зазначений бік. Так, якщо задано margin-left: -10px, це перенесе блок на десять пікселів вліво.
Відступи, що задаються у відсотках, залежать від ширини контенту блоку. Це стосується як вертикальних, так і горизонтальних відступів.
Ширина блока
Шириною блоку вважається загальна ширина контенту, відступи до рамочки (кайми), товщина цієї кайми плюс відступи зліва і справа :
Висота блоку (height)
На висоту блоку діють ті ж правила, що й на ширину. А саме, висота складається із значень висоти контенту (height), полів (padding), кайми (border) і відступів (margin). Якщо властивість height не вказана, то вона вважається як auto і в цьому випадку висота контента обчислюється автоматично в залежності від вмісту.
Разом з тим, попри схожість принципів побудови ширини і висоти, у них є суттєві відмінності. Це стосується того випадку, коли значення width і height не вказано і тоді, за замовчуванням, воно приймається як auto. Для ширини блоку - це максимально доступна ширина контенту, а для висоти блоку - це висота контенту.
Крім того, значення висоти блоку не можна встановлювати у відсотках. Якщо треба встановити висоту блоку, яка відрізняється від висоти контенту, то вона виставляється в пікселях.
З практичної точки зору простіший метод використання <div> це, наприклад, виділення частки контенту у невеличкий блок для привертання уваги до тексту, або до коду так, я це зроблено з кодом вище.
Розмітка у цьому прикладі виглядає так:
Текст, який виділено жовтим ви просто змінюєте на свій.
За допомогою блоку можна, наприклад, зробити кольоровий блок з інформаційним текстом, цитатою, або інструкцією.
Можна зробити декілька блоків із довільним текстом.
Ніщо не здатне зупинити ідею, час якої настав.
Можна зробити декілька блоків із довільним текстом.
Це текст, який ми розміщуємо всередині першого (сірого) блока.
Це текст, який ми розміщуємо всередині другого (жовтого) блока.
До блокових елементів відносяться теги <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).
- Текст за замовчуванням вирівнюється по лівому краю.
Поля (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 – відступ зліва і справа.
Висота блоку (height)
На висоту блоку діють ті ж правила, що й на ширину. А саме, висота складається із значень висоти контенту (height), полів (padding), кайми (border) і відступів (margin). Якщо властивість height не вказана, то вона вважається як auto і в цьому випадку висота контента обчислюється автоматично в залежності від вмісту.
Разом з тим, попри схожість принципів побудови ширини і висоти, у них є суттєві відмінності. Це стосується того випадку, коли значення width і height не вказано і тоді, за замовчуванням, воно приймається як auto. Для ширини блоку - це максимально доступна ширина контенту, а для висоти блоку - це висота контенту.
Крім того, значення висоти блоку не можна встановлювати у відсотках. Якщо треба встановити висоту блоку, яка відрізняється від висоти контенту, то вона виставляється в пікселях.
Слід зауважити, що якщо ширину блоку треба виставити не по всій ширині контенту, а меньше, то краще її вказувати у відсотках. Тоді блок коректно відображатиметься у мобільних браузерах і не буде вилазити за ширину екрану.
Приклад:
Приклад:
Ніщо не здатне зупинити ідею, час якої настав.
Код виглядає так
<div style="background: rgb(0, 0, 0);
border: 10px solid rgb(255, 0, 0);
margin-left: 10%;
padding-bottom: 30px;
padding-left: 5%;
padding-right: 5%;
padding-top: 30px;
text-align: center;
width: 70%;">
<span style="color: white; font-size: 20pt;"> Ніщо не здатне зупинити ідею, час якої настав.</span></div>
З практичної точки зору простіший метод використання <div> це, наприклад, виділення частки контенту у невеличкий блок для привертання уваги до тексту, або до коду так, я це зроблено з кодом вище.
Розмітка у цьому прикладі виглядає так:
<div style="background: rgb(240, 240, 240); border: 1px solid rgb(0, 0, 0); margin-left: 10px; padding: 10px 20px;">Контент всередині блока</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>
Блоки будуть виглядати так:
Аналогічно використанню інших блочних елементів, вміст тега <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>
Блоки будуть виглядати так:
Це текст, який ми розміщуємо всередині першого (сірого) блока.
Це текст, який ми розміщуємо всередині другого (жовтого) блока.