Блокові і рядкові елементи - посібник по html і css
В HTML більшість елементів можна розділити на дві групи: блокові (blok) і рядкові (inline).
Початківцю розробнику не завжди відразу вдається розібратися - в чому різниця між ними, а також запам'ятати приналежність будь-якого елементу до конкретної групи. Але з часом, з досвідом роботи у Вас не виникне і натяку на подібні труднощі.
рядкові елементи
До рядковим елементів відносяться теги: .
. . . . . . . .
Рядкові елементи в загальному потоці розташовуються послідовно на одному рядку один за іншим.
На інший рядок рядковий елемент або частину його вмісту переходить тільки в кінці рядка або коли щось примусово змушує їх перейти на новий рядок.
Рядкові елементи, природно, можуть розташовуватися всередині блочних.
блокові елементи
До блоковим елементам ставляться теги:
- .
. .
. . .
. .
Блок являє собою як би окрему структурну одиницю, виділену абзацом. Блокові елементи в загальному потоці розташовуються послідовно один під іншим. За замовчуванням два блокових елемента не можуть розташовуватися на одному рядку.
Один або кілька блоків також можуть розташовуватися всередині іншого (батьківського) блочного елемента.
В CSS блоки створюються на основі елементів HTML і мають наступну структуру.
Будь-блок має форму прямокутника.
Кордоні блоку за допомогою властивості border можна надати необхідне оформлення: задати товщину, колір і стиль ліній. За замовчуванням межа невидима.
Між вмістом і кордоном існують внутрішні відстані - поля (властивість padding). Ними необов'язково користуватися. Тобто якщо їх явно не встановити за допомогою властивості padding. то межа буде впритул примикати до вмісту блоку, або відстояти від нього на якомусь мінімальному відстані. З іншого боку, поля можуть мати абсолютно конкретні розміри, які вказує розробник.
Навколо блоку - за його кордоном існують порожні, нічим не зайняті області, звані відступами (властивість margin). Відступи - це відстані від кордону блоку, до найближчих елементів, або, якщо їх немає, то до країв вікна браузера. Відступи також, як і поля за замовчуванням відсутні, або мають мінімальну ширину, автоматично визначається браузером.
Також для блоку можна задати фіксовану ширину (властивість width) і висоту (властивість height), але лише для його вмісту. Відступи, межа і поля туди не входять. За замовчуванням як висота, так і ширина блоку підлаштовуються під розміри простору, займаного контентом.
рядкові елементи розташовані на одному рядку. Вони укладені в блоковий елемент - абзац! Перенесення тексту відбувається автоматично - в кінці рядка.
Наступний блок - абзац, починається з нового рядка.
Два абзацу розташовані.
Усередині блоку - тега div .
Окремі фрагменти тексту укладені в тег span. І для них задано стильове оформлення!
Рядкові елементи розташовані на одному рядку. Вони укладені в блоковий елемент - абзац! Перенесення тексту відбувається автоматично - в кінці рядка.
Наступний блок - абзац, починається з нового рядка.
Два абзацу розташовані.
Усередині блоку - тега div.
.
- .
.