Основы верстки: строчные и блочные элементы

1 Ноябрь, 2013 - 20:58

Почти все теги в HTML делятся на строчные (inline) и блочные (block). Разница в этих понятиях огромная.

Для начала разберемся, чем же они все-таки такие разные. Строчными элементами называются те элементы, которые непосредственно являются частью строки. Ширина таких элементов равна ширине содержимого элемента. Строчные элементы не имеют верхних и нижних отступов. В общем потоке html документа строчные элементы идут друг под другом, если объем их содержимого не превышает ширину строки. В отличие от блочных элементов, показывая строчные браузер не ставит переноса строк не перед элементом, не после него. Внутри строчных элементов можно размещать другие строчные элементы. Применение внутренних отступов padding-top и padding-bottom влияют только на высоту области, которую занимает строчный элемент, но никак не влияют на высоту строки. Внешние отступы margin-top и margin-bottom не влияют на форматирования строчного элемента. В html существует множество строчных элементов, самые популярные из них:

<a> - гиперссылка,
<abbr> - аббревиатура,
<b> - жирный шрифт,
<br> - перевод строки,
<cite> - название, используется для художественных произведений,
<code> - код программы,
<i> - курсивный шрифт,
<input> - элемент формы, может являться кнопкой, текстовым полем,
<label> - создаёт связь с элементом формы, элемент формы,
<select> - создает группу тегов option, с выпадающим списком,
<small> - уменьшает размер шрифта текста на одну единицу,
<span> - строчный элемент,
<textarea> - элемент формы, многострочное поле ввода.

Блочные элементы образуют прямоугольную область, перед и после блочного элемента стоит перевод строки. Размеры блочного элемента могут изменяться атрибутами width i height. К блочным элементам применимы как внешние, так и внутренние отступы. Внутренние отступы (padding) влияют на размеры блочного элемента. Самые распространенные блочные теги html:

< html> - документ html,
<body> - тело документа,
<div> - блок,
<p> - параграф,
<h1-h6> - заголовки от самого большого, до самого малого,
< ul, ol, dl> - маркированный, нумерованный список и список определений,
<dt, dd> - дочерние элементы dl,
<address> - курсивное форматирование текста, используется для указания автора текста,
<blockquote> - используется для выделения длинных цитат,
<form> - форма html предназначенная для обмена информацией между пользователем и сервером.

Строчные элементы в CSS характеризуются значением inline атрибутa display. Для Блочных элементов значение атрибута display равно block. Благодаря этому атрибуту, строчные элементы всегда можно превратить в блочные и наоборот. Например, давайте превратим строчную ссылку в блочную и блочный div в строчный. Строчные элементы можно размещать в блочных, а блочные в строчных нельзя.

У атрибута display также есть значение none, которое используется для скрытия элемента. Он не занимает места в общем потоке html документа и не видим для пользователя. Теперь прочитав эту подробную статью, вы легко сможете делать вашу верстку валидной и красивой.