Поля и отступы в CSS

Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.

А о блочных и строчных элементах читайте (подробнее здесь...).

Структура блока

И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding и margin соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding) и отступы (margin).

Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.

Итак. Поля задаются свойством padding. Это внутренние расстояния от границ блока до его содержимого.

Свойство применимо ко всем элементам.

Расстояние задается в единицах длины, принятых в CSS (подробнее здесь...), в %, либо (по умолчанию) определяется браузером автоматически.

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

Отступы задают при помощи свойства margin, которые определяют расстояние от границ блока до ближайших элементов или до краев окна браузера.

Свойство margin также применимо ко всем элементам.

Отступы также задаются в единицах длины, принятых в CSS (подробнее здесь...), в %, либо (по умолчанию) определяется браузером автоматически.

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

И еще: отступы (margin) располагаются за пределами блока, в то время как поля (padding) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского) блока или фон страницы.