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

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

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

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

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

К блочным (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>

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

По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.

Думаю, на примере будет понятнее.

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Блочные и строковые элементы< /title>
< /head>
< body>
< p style=" background-color: #00ffff; " > Параграф< /p>
< p style=" background-color: #00ff00; " > Параграф< /p>
< p style=" background-color: #ffff00; " > Параграф< /p>
< hr>
< span style=" background-color: #00ffff; " > Строка< /span>
< span style=" background-color: #00ff00; " > Строка< /span>
< span style=" background-color: #ffff00; " > Строка< /span>
< hr>
< div style=" background-color: #00ffff; " > Блок< /div>
< div style=" background-color: #00ff00; " > Блок< /div>
< div style=" background-color: #ffff00; " > Блок< /div>
< /body>
< /html>