Приднестровская поддержка XOOPS
Чем отличаются свойства margin и padding и в чем выражается результат их использования?
Решение
Свойство margin добавляет пустое пространство за пределами элемента. Такой внешний отступ можно задавать независимо с каждой стороны:
margin-top: 1em;
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;
То же самое можно записать в сокращенной форме:
margin: 1em 2em 0.5em 3em;
Если отступы со всех сторон одинаковы, можно использовать следующее простое правило:
margin: 1em ;
В результате его применения отступ между границей элемента и другими элементами составит 1em.
На рис. 9.2 показан вид блочного элемента после добавления к нему внешних отступов.
Код документа таков:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Отступы</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
p {
background-color: #CFEAFA;
border: 2px solid #6CB5DF;
}
p.margintest {
margin: 40px;
}
</style>
</head>
<body>
<p>В том параграфе для отступов по умолчанию использованы стили браузера.
Фон и цвет указаны в стилях страницы для наилучшего отображения границ блока.</p>
<p>В этом параграфе для отступов так же использованы стили браузера.
Данный параграф добавлен для того, что бы мы увидели размер между блоками </p>
<p class="margintest">У этого параграфа использован отступ 40px.
Данный отступ создает дополнительное пространство за границей блока </p>
</body>
</html>
Рис. 9.2. Добавление к элементу внешних отступов с помощью CSS
Свойство padding добавляет отступы внутри элемента – между его границей и дочерними элементами. Внутренние отступы можно задавать по отдельности с каждой стороны:
padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 0.5em;
padding-left: 2em;
То же самое можно записать в сокращенной форме:
padding: 1em 1.5em 0.5em 2em;
Как и при использовании свойства margin, если внутренние отступы со
всех сторон одинаковы, можно использовать следующее простое пра-
вило:
padding: 1em;
На рис. 9.3 показан вид блочного элемента после добавления к нему внутренних отступов. Код документа представлен ниже. Сравните его с документом, изображенным на рис. 9.2, – разница между свойствами margin и padding очевидна.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Padding</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
p {
background-color: #CFEAFA;
border: 2px solid #6CB5DF;
}
p.paddingtest {
padding: 40px;
}
</style>
</head>
<body>
<p>В том параграфе для отступов по умолчанию использованы стили браузера.
Фон и цвет указаны в стилях страницы для наилучшего отображения границ блока.</p>
<p>В этом параграфе для отступов так же использованы стили браузера.
Данный параграф добавлен для того, что бы мы увидели отступы по умолчанию </p>
<p class="paddingtest">У этого параграфа использован внутренний отступ 40px.
Данный отступ создает дополнительное пространство внутри блока </p>
</body>
</html>
Рис. 9.3. Добавление элементу внутренних отступов с помощью CSS
Обсуждение
Приведенное решение наглядно демонстрирует назначение свойств margin и padding. Как мы видим, первое из них создает дополнительное пустое пространство между элементом и окружающими элементами, а второе – внутри элемента, между его границей и содержимым. Рисунок 9.4 служит прекрасной иллюстрацией к вышесказанному.
Рис. 9.4. Указание внешних и внутренних отступов, а также параметров рамки элемента
При одновременном добавлении как внешних, так и внутренних отступов, к элементу с фиксированной шириной его размеры будут увеличены соответствующим образом. К примеру, у нас есть элемент с шириной в 400 пикселов, к которому мы добавляем внутренний отступ величиной в 40 пикселов со всех сторон. В этом случае его ширина составит
480 пикселов (изначально ширина в 400 пикселов плюс по 40 пикселов с каждой стороны). Добавьте к этому внешний отступ в 20 пикселов, и в итоге элемент займет по ширине 520 пикселов (видимая часть составит 480 пикселов, а пустое пространство со всех сторон – 20 пикселов).
Если макет вашего документа основан на точном расчете, обязательно просчитывайте величину каждого элемента, не забывая о внешних и внутренних отступах.
Отправитель | Нити |
---|
5 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |