Глава 7 Размеры элемента. Блоки и строки

Глава 7

Размеры элемента.

Блоки и строки.

Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.

Все элементы (теги) можно разделить на две категории: Блочные и строковые.

Чем они отличаются?

Думаю, сами названия уже говорят о различиях. Блочные или боксовые элементы - это контейнеры, прямоугольные области на мониторе компьютера которым без труда и вело-изобретательства можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по её базовой линии и как правило служат для форматирования и редакции текста.

К блочным (block) элементам относятся:
<div>, <dl>, <form>, <h1>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>…

К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>…

Основные отличия от элементов строкового и блочного типа заключаются в том что:

Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.

На примере:

<div>
<b>Это <i>правильная строка</i> в блоке</b>
</div>

<i><b>
<div>А это неправильная толи строка толи блок. Так лучше не делать!!</div>
</b></i>

Боксовые элементы, по умолчанию, располагаются относительно друг друга вертикально, т.е. в начале и конце блока происходит "перенос строки", а строковые элементы располагаются горизонтально, перенос строки происходит только в том случае если это необходимо.