~~621~~ 0 12-01-2019, 14:58

Блочные и строчные элементы в html5

В html5 все элементы делятся на две групы Блочные - с которых формируется документ и Строчные - которые находятся внутри блочных (но невсегда).

В чем отличе блочных от строчных?

Блочные:

растягиваются по всей длине родителя, имеют margin и padding
По семантике блочные могут быть только родителями. (нельзя размещать внутри строчных!)

Строчные:

растягиваются на длину внутреннего содержимого или самого текста который внутри строчного блока.
Не имеют margin-top и margin-bottom, а также не имеют padding-top и padding-botttom. - Это вызывает эффект схлопывания горизонтальных отступов! (и считается багом браузеров)
строчные блоки по умолчанию имеют значение (float:left;)

Также есть еще блоки гибриды которые могут иметь свойства блочных и строковых одновременно. Ихнее поведение не возможно предсказать...

Гибридные:

<audio>
<button>
<canvas>
<embed>
<input>
<keygen>
<meter>
<object>
<progress>
<select>
<textarea>
<video>

Немного практики:

<div>
     <i>
       &Содержимое или текст строчного
    </i>
</div>
<style>
  div {background: #FF0000; padding: 10px; margin: 12px; border: 3px solid #4d8f25;}
  i {background: #C0C0C0; margin: 10px; padding: 10px;}
</style>

Содержимое или текст строчного

Как побороть эффект схлопывания?

(сделать строчный элемент блочным - display:block; Также нужно задать родителю и ребенку padding или margin)

<div>
     <i>
       &Содержимое или текст строчного
    </i>
</div>
<style>
  div {background: #FF0000; padding: 10px; margin: 12px; border: 3px solid #4d8f25;}
  i {display:block;background: #C0C0C0; margin: 10px; padding: 10px;}
</style>

Содержимое или текст строчного

Самое интересное что в html5 всегда можно сделать из блочного элемента строчный и наоборот! Но делается это уже с помощью CSS3.

Главное что нужно запомнить - строчный элемент может находится только внутри блочного или другого строчного.... Иначе W3C будет ругатся... Для лучшего понимания нужно знать иерархию html5.