Як нам здається, це саме та область, пізнавши яку, новачкам стане набагато простіше працювати.
Блоковий елемент є елементом, який володіє (але не обмежений ними, тим не менше) наступними характеристиками:
* Без зазначеного значення ширини він природним чином розтягується на весь батьківський контейнер
* Може бути оформлений полями (margin) або відступами (padding)
* Без зазначеного значення висоти він природним чином розтягується до розміру, потрібного для розміщення всередині нього дочірніх елементів (припустимо, що вони не вирівняні по якомусь краю чи у них не вказано позиціонування)
* За замовчуванням цей елемент буде розташований нижче попереднього в розмітці елемента (припустимо, що навколишні елементи не вирівняні по якомусь краю чи у них не вказано позиціонування)
* Ігнорує параметр vertical-align
Тобто блочному елементу не обов'язково ставити значення ширини або вказувати значення в 100%, якщо вам потрібно, щоб елемент розтягувався по горизонталі. Більш того, це навіть може викликати деякі нестиковки і непередбачені проблеми.
І, як свідчить 4 пункт списку, наведеного вище, також не обов'язково «вичищати» блоковий елемент; якщо імовірно блоковий елемент не вирівнюються по якомусь краю, то він буде очищено автоматично і відобразиться на наступній «рядку» за течією розмітки сторінки.
Приклади блокових елементів:
Рядкові елементи мають (але не обмежені ними, тим не менше) наступними характеристиками:
* Простягається разом з текстовим контентом
* Не буде очищати попередній контент для того, щоб перейти на наступний рядок (як блокові елементи)
* Схильний до параметру white-space в CSS
* Ігнорує параметри верхнього і нижнього поля (margin), але приймає поля по лівій і правій сторонах, а також відступи (padding)
* Ігнорує значення висоти і ширини
* Якщо вирівнюються по лівому або правому краю, автоматично стане блоковим елементом, що володіє всіма характеристиками блокових елементів
* Схильний до параметру vertical-align
Найпростіший спосіб представити рядковий елемент, це подумати про те, як якщо б блок поводиться як текст. Що трапляється, наприклад, з текстом, якщо він не поділений іншими елементами? Символ слід за символом. Якщо ви вставите рядковий елемент в текст, то він буде вести себе як ніби уривок тексту.
Приклади малих елементів:
Що слід знати
Потрібно зауважити, що приклади як блокових, так і малих елементів цілком змістовні: блокові елементи є структурними, в той час як малі більше засновані на тексті. Це відмінний спосіб запам'ятати, що є що, хоча спочатку ви все одно будете плутатися.
Коротше кажучи, ви можете розмістити будь-блоковий елемент всередині іншого блочного. Ви також можете розмістити рядковий елемент всередині блокового елемента, і будь-який рядковий всередині іншого сатиричного. Але ви не можете розмістити блоковий елемент всередину сатиричного, за одним лише винятком - ви можете обернути елемент «a» навколо будь-якого контенту, будь то блоковий, рядковий або поєднаний елемент.
У вас є можливість змінити будь-який блоковий елемент на рядковий, і назад. Все це реалізується за допомогою параметра display. Так що, не забувайте про це в потрібні моменти. Але не варто використовувати неправильний елемент в неправильному місці. Пам'ятається нам випадок, коли «знаючий» власник веб-сайту хотів, щоб розробники використовували елемент «h2» і оформили його так, ніби це звичайний текст, і помістили його в елемент paragraph, щоб, таким чином, швидше домогтися результатів у пошукових системах. Не дуже хороша ідея, так як для цих цілей є елемент «em».
Додатково: заміщені елементи
На самому початку ми говорили, що блокові і рядкові елементи - це всього лише два типи контенту. Правильніше буде назвати їх основними типами, і не варто сильно переживати з приводу інших типів.
Але є дещо, що прийнято називати заміщені елементами. Тобто, ці елементи не відносяться ні до одного, ні до другого типу. Але можливо ви класифікуєте їх як щось більше схоже на рядкові елементи, але зі структурою блокових.
Якщо ви тільки починаєте працювати з CSS, то розуміння принципів блокових і малих елементів у значній мірі розширить ваші навички і знання.