Главная | Регистрация | Вход | RSS | Вторник, 19.03.2024, 10:19 | |||||||||||||||||
КАК СОЗДАТЬ СВОЙ САЙТ | ||||||||||||||||||
Урок "11"Поля (margin) и отступы (padding)Это очень простой, но в это же время и нужный урок. Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS. MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока. И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат: .p1 { Ну как разобрались? если читали текст внутри примера, то точно разобрались... Добавляя уже знакомые нам ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева. p { Тоже самое, только в более сокращенной записи: p { Т.е. так как только левое поле отличается от остальных, мы просто записали общее поле, а потом дописали значение левого поля, и получили тот же результат что и в первом примере. Возможен также такой вариант записи: p { Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое. В каких случаях лучше пользоваться отступами, а в каких полями? А это уже решать Вам, могу только дать несколько принципиальных отличий:
Думаю тут нет ничего сложного, главное попрактикуйтесь, придумайте свои примеры, а уже потом можете двигаться дальше :) См. также Следующий - Урок 12: Высота(height) и ширина(width) блоков |
|