Этот учебник будет посвящен двум вещам: внешние отступы и внешние поля.
Начнем с внешних отступов. Для элемента p, определенного непосредственно внутри body, указания слева и справа от окна означают расстояние до внешних границ элемента body. Если следуют несколько абзацев подряд, указания сверху и снизу на внешнее поле означают интервал между отдельными абзацами.
Кстати, при определении внешних отступов и полей также возможны отрицательные значения, что позволяет создавать наложения.
Установка внешнего отступа
Внешнее поле и отступ являются принудительным пустым пространством между текущим элементом и его родительским или соседним элементом. Полезными являются следующие свойства CSS в HTML-элементах, создающих собственный абзац или блок.
В случае с margin это является сокращенной формой четырех свойств margin-top, margin-right, margin-bottom и margin-left. При этом допустимы следующие значения:
• auto – внешний отступ вычисляется автоматически.
• Проценты - относится к элементу, для которого указан отступ.
• Длины - также допускаются отрицательные значения. Это позволяет элементам находиться наложенными друг на друга.
Допускается указание до четырех значений:
• одно значение - внешний отступ сверху, снизу, слева и справа
• два значения - первое значение для внешнего отступа сверху и снизу, второе значение для внешнего отступа справа и слева
• три значения - первое значение для внешнего отступа сверху, второе значение для внешнего отступа слева и справа, третье значение для внешнего отступа снизу
• четыре значения - первое значение для внешнего отступа сверху, второе для справа, третье снизу и четвертое слева.
Следующий пример показывает использование общих свойств margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Собрать камерный риг</p>
<p class="ex">В этом видеоуроке вы узнаете, как создать камерный риг и безопасно перемещать его по 3D-пространству. Дается проектный файл.</p>
</body>
</html>
В этом примере определены два текстовых абзаца.
Кроме того, второму абзацу были присвоены отступы.
margin: 30px 50px 30px 50px;
Это указание означает следующее:
• 30 пикселей отступа сверху
• 50 пикселей отступа справа
• 30 пикселей отступа снизу
• 50 пикселей отступа слева
Индивидуальные указания для отступов
Ранее было представлено общее указание margin. Однако можно также делать индивидуальные указания. Применяя следующие свойства, можно определить отступ сверху, слева, снизу или справа для отдельных сторон элемента.
• margin-top – внешний отступ сверху
• margin-right – внешний отступ справа
• margin-bottom – внешний отступ снизу
• margin-left – внешний отступ слева
Все четыре свойства могут использовать следующие значения:
• auto – внешний отступ вычисляется автоматически.
• Проценты - относится к элементу, для которого указан margin- [top, right, bottom, left].
• Длины - также допускаются отрицательные значения. Это позволяет элементам находиться наложенными друг на друга.
Следующий пример показывает, как эффективно использовать индивидуальные указания.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Собрать камерный риг</p>
<p class="ex">В этом видеоуроке вы узнаете, как создать камерный риг и безопасно перемещать его по 3D-пространству. Дается проектный файл.</p>
</body>
</html>
В браузере результат будет выглядеть так:
Установка внутреннего отступа
Внутренний отступ представляет принудительное пустое пространство между содержимым элемента и его собственным элементом. Полезными являются следующие CSS-свойства в HTML-элементах, которые создают собственный абзац или блок.
Для padding это является сокращенной формой четырех свойств padding-top, padding-right, padding-bottom и padding-left. Здесь можно определить ширину между рамкой и содержимым элемента, то есть внутренний отступ.
• Проценты - относятся к родительскому элементу.
• Длины
Можно указать до четырех значений:
• одно значение - внутренний отступ сверху, снизу, слева и справа
• два значения - первое значение для внутреннего отступа сверху и снизу, второе значение для внутреннего отступа справа и слева
• три значения - первое значение для внутреннего отступа сверху, второе значение для внутреннего отступа слева и справа, третье значение для внутреннего отступа снизу
• четыре значения - первое значение для внутреннего отступа сверху, второе для справа, третье снизу и четвертое слева.
Также есть пример:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Соберите камерный риг</p>
<p class="ex">В этом видеоуроке вы узнаете, как создать камерный риг и безопасно перемещаться с ним по трехмерному пространству. Проектный файл прилагается.</p>
</body>
</html>И вот результат в браузере:
Четыре свойства padding позволяют задать внутренние отступы. Для этого доступны следующие четыре CSS-свойства:
• padding-top – Расстояние между верхней границей содержимого и верхним краем
• padding-bottom – Расстояние между нижней границей содержимого и нижним краем
• padding-left – Расстояние между левой границей содержимого и левым краем
• padding-right – Расстояние между правой границей содержимого и правым краем.
Для всех четырех свойств допустимы следующие значения:
• процентное значение – относится к родительскому элементу
• значение длины
