Блочні елементи

Влад Мержевич

Блочним елементом називається елемент, який відображається на веб-сторінці у вигляді прямокутника. Цей елемент займає всю доступну ширину, висота елемента визначається його вмістом і завжди починається з нового рядка. До блочних елементів відносяться контейнери <div>, <h1>, <p> та інші.

Дозволяється вкладати один блочний елемент всередину іншого, а також розміщувати всередині них вбудовані елементи (<span>, наприклад). Заборонено додавати всередину вбудованих елементів блочні (приклад 1).

Приклад 1. Використання блочних елементів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Блочні елементи</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <div><p>Lorem ipsum dolor sit amet...</p></div>
  <h2><a href="link1.html">Ut wisi enim ad minim veniam</a></h2>
 </body>
</html>

У цьому прикладі абзац (тег <p>) вставляється всередину контейнера <div>, а посилання (тег <a>) — в заголовок <h2>. На додачу, помилкою буде додати навпаки — вставити <h2> всередину контейнера <a> (<a href="link1.html"><h2>Ut wisi</h2></a>), оскільки тег <a> не відноситься до блочних елементів.

Вкладання блочних тегів всередину вбудованих елементів характерне, скоріше, для новачків, які ще не розуміють різницю між ними. Крім того, браузери навчилися виявляти подібні помилки і відображати код більш-менш коректно. Тем не менше, рекомендуємо дотримуватися у цьому питанні специфікації, щоб виводити веб-сторінку без помилок.

Ширина блочних елементів

Зазвичай ширина блоку обчислюється автоматично і займає всі доступні простори. Тут варто зауважити, що під цим розуміється. Наприклад, якщо тег <div> у коді документа присутній один, то він займає всю вільну ширину вікна браузера і ширина блоку буде дорівнювати 100%. Варто помістити один тег <div> всередину іншого, як ширина внутрішнього тегу починає обчислюватися відносно його батька, тобто зовнішнього контейнера.

Деякі браузери досить вільно трактують поняття ширини, хоча в специфікації CSS чітко вказано, що ширина складається з суми наступних параметрів: ширини самого блоку (width), відступів (margin), полів (padding) і меж (border). У прикладі 2 показано створення шару, в якому присутні всі ці компоненти.

Приклад 2. Ширина шару

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ширина</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
   DIV {
    width: 300px; /* Ширина шару */
    margin: 7px; /* Значення відступів */
    padding: 10px; /* Поля навколо тексту */
    border: 4px solid black; /* Параметри межі */
    background: #fc0; /* Колір фону */
   }
  </style>
 </head>
 <body>
  <div>Lorem ipsum dolor sit amet...</div>
 </body>
</html>

Як результат цього прикладу отримаємо шар шириною 342 пікселя. На малюнку 1 показано, з чого складається ширина шару.

У випадку, коли <!DOCTYPE> в коді не вказаний, браузер Internet Explorer приймає за ширину всього блоку значення властивості width.

Розглянемо ще один приклад пов'язаний з шириною. Зазвичай ширина шару встановлюється як auto, це дозволяє вписувати шар у вікно браузера, не враховуючи значення встановлених полів. Якщо змінити ширину на 100%, то при додаванні значень відступів, полів або меж неодмінно з'явиться горизонтальна полоса прокрутки.

Для отримання універсального результату існують кілька підходів. У прикладі 3 продемонстровано створення трьох шарів, ширина яких визначається в відсотках.

Приклад 3. Ширина шару в відсотках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ширина</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
   #layer1 {
    width: 100%; /* Ширина першого шару */
    padding: 10px; /* Поля навколо тексту */
    background: #fc0; /* Колір фону */
   }
   #layer2 {
    width: 100%; /* Ширина другого шару */
    background: #cc0; /* Колір фону */
   }
   #layer2 P {
    padding: 10px; /* Поля навколо абзацу */
   }
   #layer3 {
    background: #3ca; /* Колір фону третього шару */
    padding: 10px; /* Поля навколо тексту */
   }
  </style>
 </head>
 <body>
  <div id="layer1">Lorem ipsum dolor sit amet...</div>
  <div id="layer2"><p>Lorem ipsum dolor sit amet...</p></div>
  <div id="layer3">Lorem ipsum dolor sit amet...</div>
 </body>
</html>

Результат прикладу показаний на малюнку 2.

Ширина першого шару у цьому прикладі (layer1) встановлена як 100%, що призводить до відображення горизонтальної полоси прокрутки. Для другого шару (layer2) ширина також задана 100%, але поля визначаються для внутрішнього абзацу (тег <p>). Через це ширина шару в усіх браузерах буде однаковою. Для третього шару (layer3) взагалі не застосовується властивість width, тому він визначається за замовчуванням — auto. У такому випадку шар буде займати всю ширину вікна браузера без будь-яких горизонтальних полос.

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

Висота

З висотою блочних елементів справа стоїть аналогічно ширині. Браузер для висоти шару приймає значення властивості height і додає до нього ще значення margin, padding і border. Якщо висота шару не встановлена явно, то вона обчислюється автоматично виходячи з обсягу вмісту.

Припустимо, для шару встановлена висота в пікселях, а вміст шару однозначно перевищує зазначену висоту (приклад 4).

Приклад 4. Висота шару

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Висота</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
   #layer1 {
    width: 300px;/* Ширина шару */
    background: #fc0; /* Колір фону */
    height: 50px; /* Висота шару */
    padding: 5px; /* Поля навколо тексту */
   }
  </style>
 </head>
 <body>
  <div id="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
 </body>
</html>

Результат даного прикладу продемонстровано на малюнку 3.

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

Колір фону

Колір фону елементу найпростіше встановлювати через універсальну властивість background. Фоном при цьому заливається область, яка визначається значеннями width, height і padding (малюнок 4).

Рис. 4

Рис. 4. Область шару, яка заповнюється фоновим кольором

Отже, margin не бере участі в формуванні кольорово

Часті запитання