Rambler's Top100
Пятница, 28.07.2017, 19:49

КАК СОЗДАТЬ СВОЙ САЙТ

Урок "11"

Поля (margin) и отступы (padding)

Это очень простой, но в это же время и нужный урок. Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.

 
MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

.p1 {
background-color : #FFE446;
border:1px solid red;
margin:70px;
}
.p2 {
background-color : #FFE446;
border:1px solid red;
padding:70px;

}
.p3 {
background-color : #FFE446;
border:1px solid red;
margin:50px;
padding:20px;
}

Ну как разобрались? если читали текст внутри примера, то точно разобрались...

Добавляя уже знакомые нам ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.

p {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:150px;
}

Тоже самое, только в более сокращенной записи:

p {
margin:50px;
margin-left:150px;
}

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

Возможен также такой вариант записи:

p {
margin: 50px 50px 50px 150px;
}

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

В каких случаях лучше пользоваться отступами, а в каких полями?

А это уже решать Вам, могу только дать несколько принципиальных отличий:

  • Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;
  • Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.

Думаю тут нет ничего сложного, главное попрактикуйтесь, придумайте свои примеры, а уже потом можете двигаться дальше :)

 

См. также

Следующий   - Урок 12: Высота(height) и ширина(width) блоков
Предыдущий - Урок 10: Рамки в CSS

Google +1
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 80
Поиск
Календарь
«  Июль 2017  »
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
31
Архив записей
Друзья сайта
  • Обновление навигаторов
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0