Особливості блокових елементів(тегів) HTML

Привіт:) У цьому матеріалі зібрав поширені особливості застосування блокових HTML-елементів у верстці сайтів.

Основні блокові елементи сторінки сайту

<address>
<blockquote>
<center>
<div>
<fieldset>
<form>
<footer>
<header>
<hr>
<h1>-<h6>
<isindex>
<menu>
<ol>
<p>
<pre>
<table>
<ul>

Особливості роботи за застосування

Блокові теги займають всю доступну ширину свого батьківського елемента (контейнера), формально створюючи блок (звідси і назва). Їх можна уявити у вигляді стопки коробок.
Якщо елемент знаходиться безпосередньо всередині <body>, він буде займати всю ширину веб-сторінки. Якщо елемент знаходиться всередині іншого, то займатиме всю ширину батьківського.
Ширина блоку складається із значень властивостей width, padding, border та margin. width - це не ширина блоку, а лише ширина вмісту, а сам блок складається із його вмісту, відступів, меж та полів. Для спрощення застосовується властивість box-sizing, що змінює алгоритм розрахунку ширини. При значенні border-box властивість width визначає ширину блоку, включаючи padding і border, але не margin.
Висота елемента визначається браузером автоматично, виходячи із його вмісту.
Блоковий тег завжди починається з нового рядка. Браузери зазвичай відображають блокові елементи з переходом на новий рядок до і після елемента.
Для висоти елемента працюють ті ж принципи, що й для ширини, за винятком того, що висота залежить від висоти вмісту та змінюється динамічно, наприклад, при зміні розміру шрифту або вікна браузера. Якщо явно встановити висоту вмісту через властивість height, висота блоку складається з height і значень margin, border, padding зверху та знизу. При перевищенні вказаної висоти вміст відображається поверх блоку. На блокові елементи не діють властивості, призначені для рядкових елементів.