Блочные элементы

В HTML документе элементы разделяются на два типа элементов: блочные и строчные элементы.

Строчные элементы предназначены для того, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим. К строчным элементам относятся теги: <a>, <br>, <code>, <em>, <img>, <span>, <strong>, <sub>, <sup>....
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, могут располагаться внутри блочных. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости.
Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.


Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки. Блочные элементы рассматриваются как прямоугольный контейнер, в котором находится какое-либо содержимое. К блочным элементам относятся контейнеры <div>, <h1>, <p>, <ul>, <li>, <table> и др.
При отображении блочного элемента браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом блочный элемент занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Блочный элемент имеет область (границы), которые задаются параметрами height и with, а также блочный элемент имеет дополнительные свойства.

Поля и отступы блочных элементов.
Внешний отступ (margin) и внутреннее поле (padding) являются очень важными стилями при построении HTML-страницы, так как позволяют более точно позиционировать элементы, создать каркас с необходимыми зазорами и т.п. Внутреннее поле (padding) задает положение содержимого элемента(content) относительно рамки, а внешний отступ (margin) позволяет позиционно отделить содержимое элемента с рамкой от других элементов документа. 1.Свойство margin - Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
Пример:
* margin:10px; - все четыре отступа 10px
* margin:10px 5px; - верхний и нижний отступы 10px - правый и левый отступы 5px
* margin:10px 5px 15px; - верхний отступ 10px - правый и левый отступы 5px - нижний отступ 15px
* margin:10px 5px 15px 20px; - верхний отступ 10px - правый отступ 5px - нижний отступ 15px - левый отступ 20px

Также можно использовать отдельные свойства, которые позволяют задать величину отступа только на определенных сторонах элемента, воспользуйтесь свойствами:
margin-top - верхний отступ для элемента; margin-bottom - нижний отступ для элемента;
margin-left - левый отступ для элемента; margin-right - правый отступ для элемента.

2.Свойство padding - Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Пример:
* padding:10px; - все четыре поля 10px
* padding:10px 5px; - верхнее и нижнее поля 10px - правое и левое поля 5px
* padding:10px 5px 15px; - верхнее поле 10px - правое и левое поля 5px - нижнее поле 15px
* padding:10px 5px 15px 20px; - верхнее поле 10px - правое поле 5px - нижнее поле 15px - левое поле 20px

Также можно использовать отдельные свойства, которые позволяют задать величину полей только на определенных сторонах элемента, воспользуйтесь свойствами:
padding-top - верхнее поле для элемента; padding-bottom - нижнее поле для элемента;
padding-left - левое поле для элемента; padding-right - правое поле для элемента.

3.Свойство border - Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
border: [border-width || border-style || border-color]
Значение border-width определяет толщину границы. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Значение border-style определяет стиль рамки вокруг элемента: dotted | dashed | solid | double | groove | ridge | inset | outset
Значение border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Также можно использовать отдельные свойства, которые позволяют установить границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Произвольное расположение или обтекание (floating) блочных элементов.
Свойство float — позволяет задать расположение блочных элементов относительно друг друга. Другими словами свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Классический пример. Свойство float используют для размещения картинки по левому или правому краю с эффектом обтекания текста с противоположной стороны.
Синтаксис:
float: left | right | none | inherit;
Значения:
left — Выравнивает элемент по левому краю, а все остальные блочные элементы обтекают его по правой стороне.
right — Выравнивает элемент по правому краю, а все остальные блочные элементы обтекают его по левой стороне.
none — Обтекание элемента не задается.
inherit — Наследует значение родителя.

Особенности:
1. Свойство float может быть задано любому элементу (блочному или строчному) при этом элемент при наличии float получает свойство display:block

Свойство clear - отменяет действие float с указанной стороны для последующих (нижестоящих) элементов.
Синтаксис:
clear: none | left | right | both | inherit;
Значения:
none - Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both - Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left - Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right - Отменяет обтекание с правой стороны элемента.
inherit - Устанавливает значение родителя.