Сайт по Электронике и Web-разработке
Как сделать свой сайтКак сделать свой сайт
Отступы в CSS. На странице описано создание необходимых отступов и полей для форматирования элементов Web-дизайна сайтов, блогов или порталов

Отступы в CSS

Отступы в CSS

Свойства таблиц стилей CSS

Если вы внимательно посмотрите на файл стилей CSS в любом шаблоне для WordPress (да для любого другого сайта тоже), то увидите, что там довольно часто встречаются свойства margin и padding. Эти свойства определяют положение данного элемента относительно других, более старших или соседних элементов.

Отступы в CSS задает свойство padding, а свойство margin – размеры полей вокруг элемента. Свойства width и height задают его ширину и высоту. Свойство border определяет размер и внешний вид рамки.

На рисунке представлена схема расположения отступов, рамок и полей: В центре расположен некоторый элемент, например, div (контейнер), p (абзац) или H1 (заголовок). Если больше ничего не указано, то элемент имеет тот размер, который нужен для его отображения в зависимости от количества текста в нем.

Когда для элемента задается ширина width, то браузер старается выполнить это требование. Высота height не всегда может быть задана четко – если содержимое элемента не помещается в заданную высоту, то высота может быть увеличена так, чтобы поместилось все содержимое, но не всегда.

В некоторых случаях просто обрезается кусок текста. А вот другие свойства из этой схемы определяют расстояния между соседними элементами и их положение на странице. По умолчанию все элементы выводятся браузером, начиная с верхнего левого свободного угла. Например, браузер сначала вывел заголовок страницы. Потом он начинает выводить абзац с текстом. Если мы не укажемникаких значений отступов в CSS таких как свойств margin и padding, то текст абзаца пойдет сразу за заголовком, занимая все свободное пространство. Если же заданы отступы и поля, то этот абзац можно сместить: Значения для свойств margin, padding, width и height задаются с помощью единиц измерения длины, так же как и для размера шрифта.

Цвет фона определяется так: для отступов используется цвет фона самого элемента, а для полей – цвет фона более старшего элемента. Например: body {background-color: white;} p {background-color: red; margin: 10px; border: 1 solid grey; padding: 10px;}. Если мы установили поля и отступы для абзаца, у которого фон красный, то отступы (расстояние от текста абзаца до рамки) тоже будут красными, а вот поля уже будут белые, т.к. у более старшего элемента (body) – фон белый.

Отступы в CSS позволяют устанавливать различные значения полей, так же, как это мыделали для рамок. Принцип тот же – сначала указываем значение для верхних рамки или отступа, затем для правых, нижних, и левых. Если указать отрицательное значение для полей, то элемент может «наезжать» на соседние с ним элементы или выходить за границы содержащего его элемента (как, напимер, рисунок с чертиком в каробке выходит за границы содержащего его абзаца).

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

Назад в рубрику