Главная » HTML5 » Разная информация » Блочные и строчные элементы в html5
424 0  

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

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

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

Блочные:

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

Строчные:

  • растягиваются на длину внутреннего содержимого или самого текста который внутри строчного блока.
  • Не имеют margin-top и margin-bottom, а также не имеют padding-top  и  padding-botttom.  what - Это вызывает эффект схлопывания горизонтальных отступов! (и считается багом браузеров)
  • строчные блоки по умолчанию имеют значение (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>
 Содержимое или текст строчного

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


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


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021