Отступы и поля в CSS
Если вы внимательно посмотрите на файл стилей CSS в любом шаблоне для WordPress (да для любого другого сайта тоже), то увидите, что там довольно часто встречаются свойства margin и padding. Эти свойства определяют положение данного элемента относительно других, более старших или соседних элементов. Отступы в CSS задает свойство padding, а свойство margin – размеры полей вокруг элемента. Свойства width и height задают его ширину и высоту. Свойство border определяет размер и внешний вид рамки.
На рисунке представлена схема расположения отступов, рамок и полей:
В центре расположен некоторый элемент, например, div (контейнер), p (абзац) или H1 (заголовок).
Если больше ничего не указано, то элемент имеет тот размер, который нужен для его отображения в зависимости от количества текста в нем.
Когда для элемента задается ширина width, то браузер старается выполнить это требование. Высота height не всегда может быть задана четко – если содержимое элемента не помещается в заданную высоту, то высота может быть увеличена так, чтобы поместилось все содержимое, но не всегда. В некоторых случаях просто обрезается кусок текста.
А вот другие свойства из этой схемы определяют расстояния между соседними элементами и их положение на странице.
По умолчанию все элементы выводятся браузером, начиная с верхнего левого свободного угла. Например, браузер сначала вывел заголовок страницы. Потом он начинает выводить абзац с текстом. Если мы не укажем никаких значений свойств 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 
Считается, что все нововведения в Интернете приходят к нам с запада. Но вот реализуют эти модерновые идеи часто наши соотечественники. В немецком агентстве Internetagentur работают наши ребята, которые создают очень интересные и креативные сайты. Как говорят в Германии: “Die gute Internetagentur fuer Webdesign aus Deutschland hilft Ihnen”!
У вас можно всему научиться и на компьютерные курсы не надо ходить. Моя подруга к вам заглядывает за полезными советами.
Спасибо, Арлетт!
Пишите заказы, что вас с подругой интересует, чтобы я знала о чем писать
Тоже веб-дизайном интересуюсь, спасибо за схему. Кстати, в моем блоге можете почитать о CSS и дизайне