Цю інструкцію розглянемо дві речі: зовнішні відступи та зовнішні поля.
Розпочнемо з зовнішніх відступів. Для елементу p, що безпосередньо визначений всередині елементу body, вказання лівого та правого краю вікна означають відстань від зовнішніх меж елементу body. Якщо декілька абзаців йдуть один за одним, вказівки на зовнішні поля вгорі та внизу визначають відстань між окремими абзацами.
При визначенні зовнішніх відступів та полів також можливі від'ємні значення, які дозволяють досягти накладань.
Встановлення зовнішнього відступу
Зовнішній поле та відступ є примусовим вільним простором між поточним елементом та його батьківським або сусіднім елементом. Для HTML-елементів, які формують власний абзац або блок, корисними є наступні CSS-властивості.
У випадку з властивістю 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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
У цьому прикладі визначено два текстових абзаци.
Другому абзацу також призначені відступи.
margin: 30px 50px 30px 50px;
Це вказівка означає наступне:
• 30 пікселів відстані зверху
• 50 пікселів відстані справа
• 30 пікселів відстані знизу
• 50 пікселів відстані зліва
Особисті вказівки для відступів
Раніше було представлено загальне вказання для margin, але можна робити також особисті вказівки. Через наступні властивості можна визначити відстані зверху, зліва, знизу чи справа відносно окремих бічних сторін елементу.
• margin-top – зовнішній відступ зверху
• margin-right – зовнішній відступ справа
• margin-bottom – зовнішній відступ знизу
• margin-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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
У браузері результат виглядає наступним чином:
Встановлення внутрішнього відступу
Внутрішньому полю відповідає примусовий вільний простір між вмістом елемента та його власним краєм елемента. Для HTML-елементів, які формують власний абзац або блок, корисними є наступні CSS-властивості.
У випадку з властивістю 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">У цьому відео-навчанні ви дізнаєтеся, як створити камерний ріг та безпечно рухатися ним у 3D-просторі. Додається файл проекту.</p>
</body>
</html>І ось результат у браузері:
За допомогою чотирьох властивостей padding можна визначити внутрішні відступи. Для цього доступні наступні чотири властивості CSS:
• padding-top – Відстань між верхнім краєм вмісту та верхнім краєм
• padding-bottom – Відстань між нижнім краєм вмісту та нижнім краєм
• padding-left – Відстань між лівим краєм вмісту та лівим краєм
• padding-right – Відстань між правим краєм вмісту та правим краєм.
Для всіх чотирьох властивостей можна використовувати наступні значення:
• Відсоткове вказання – відноситься до батьківського елемента
• Вказання довжини
