ZODIOS.net

Строчные – inline и блочные – block-level элементы

09.15.2008  –  Рубрика: HTML&CSS

Большинство структурных элементов html делиться на две основные группы, которые позволяют сформировать документ практически любой сложности – блочные элементы(block) и строчные элементы(inline).

В чем состоит основная разница между этими элементам? Кардинальным различием между ними является то, что строчные элементы (inline), по определению, не имеют верхнего и нижнего отступа. Это основано на том, что в общем потоке строчные элементы (inline) идут друг за другом, то есть в одной строке и на другую переходят только когда доходят до конца строки, или когда что-то принудительно заставляет перейти на новую строку. Блочные элементы (block), в отличие от строчных элементов, в общем потоке располагаются один под другим. То есть, строчным элементам нельзя задать margin-top, margin-bottom, padding-top, padding-bottom.

Благодаря этой характеристике есть подводные камни, они состоят в том, что согласно спецификации HTML 4.0, есть ряд элементов, которые относятся к строчным элементам (ниже приведен список строчных и блочных элементов), но которым можно задавать вертикальные отступы. К таким относится элемент img, input, textarea, select.

В этом есть доля разумного, так благодаря тому, что тег img относиться к строчным элементам, ему можно задавать обтекание изображения текстом. Но с другой стороны это порой делает и «медвежью услугу». Так, например многие сталкивались с тем, что если тег img взять в ссылку это приведет к тому, что вокруг тега img появляется рамка цвета, который присвоен ссылке. Убрать ее можно присвоив стилевое свойство border:0.

Другой палкой с двумя концами, является ситуация, когда в строке один за другим идет текстовый элемент и элемент формы, такой как поле ввода, или кнопка, тогда бывает что текстовый элемент расположен не строго посредине от элемента формы, а как бы снизу от него. Эта проблема решается путем присвоения числового значения вертикальному внутреннему отступу(padding-top,padding-bottom) которое и скомпенсирует неровность по вертикали. Для наглядности ниже приводиться список элементов, которые относятся к строчным элементам, и которые к блочным.

К строчным(inline) элементам относятся:

<a href="http://zodios.net">xxx</a>
<br />
<cite>xxx</cite>
<code>xxx</code>
<em>xxx</em>
<img />
<input />
<label>xxx</label>
<select></select>
<span>xxx</span>
<strong>xxx</strong>
<sub>xxx</sub>
<sup>xxx</sup>
<textarea>xxx</textarea>

К блочным block-leve элементам относятся:

<div>xxx</div>
<dl>xxx</dl>
<form>xxx</form>
<h1>xxx</h1>
<h2>xxx</h2>
<h3>xxx</h3>
<h4>xxx</h4>
<h5>xxx</h5>
<h6>xxx</h6>
<hr />
<noscript>xxx</noscript>
<ol>xxx</ol>
<p>xxx</p>
<pre>xxx</pre>
<table>xxx</table>
<ul>xxx</ul>

Tags: HTML