CSS Margin - Поля (зовнішні відступи)
Поля використовуються для створення простору навколо елементів поза будь-якими визначеними межами.
CSS Поля
CSS властивості margin використовуються для створення простору навколо елементів за межами будь-яких визначених меж - полів (або зовнішніх відступів).
Завдяки CSS у вас є повний контроль над полями. Є властивості для встановлення поля для кожної сторони елемента (вгорі, справа, знизу і зліва).
Margin - Окремі сторони
CSS має властивості для визначення поля для кожної сторони елемента:
margin-topmargin-rightmargin-bottommargin-left
Всі властивості полів можуть мати наступні значення:
- auto - браузер автоматично обраховує поле
- length - вказує поле в пікселях, pt, см і т.д.
- % - вказує поле в % від ширини, що має елемент
- inherit - вказує, що поле має бути успадковане від батьківського елемента
Підказка: Негативні значення полів також допускаються.
Приклад
Встановіть різні поля для всіх чотирьох сторін елемента <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Спробуйте самі »
Margin - Скорочена властивість
Щоб скоротити код, можна вказати всі властивості полів в одній властивості.
Властивість margin є скороченою властивістю для наступних індивідуальних властивостей полів:
margin-topmargin-rightmargin-bottommargin-left
Ось як це працює:
Якщо властивість margin має чотири значення:
- margin: 25px 50px 75px 100px;
- верхнє поле 25px
- праве поле 50px
- нижнє поле 75px
- ліве поле 100px
Примітка. Початок обрахування зовнішніх полів починається з верхнього поля, потім поля вказуються по колу за годинниковою стрілкою - праве, нижнє, ліве. Так легше запам’ятати.
Приклад
Використовуйте скорочену властивість поля з чотирма значеннями:
p {
margin: 25px 50px 75px 100px;
}
Спробуйте самі »
Якщо властивість margin має три значення:
- margin: 25px 50px 75px;
- верхнє поле 25px
- праве і ліве поля 50px
- нижнє поле 75px
Приклад
Використовуйте скорочену властивість поля з трьома значеннями:
p {
margin: 25px 50px 75px;
}
Спробуйте самі »
Якщо властивість margin має два значення:
- margin: 25px 50px;
- верхнє і нижнє поля 25px
- праве і ліве поля 50px
Приклад
Використовуйте скорочену властивість поля з двома значеннями:
p {
margin: 25px 50px;
}
Спробуйте самі »
Якщо властивість margin має одне значення:
- margin: 25px;
- всі чотири поля 25px
Приклад
Використовуйте скорочену властивість поля з одним значенням:
p {
margin: 25px;
}
Спробуйте самі »
Значення auto
Ви можете встановити для властивості поля значення auto щоб горизонтально центрувати елемент в його контейнері.
При цьому елемент займе вказану ширину, а залишений простір буде розділено порівну між лівим і правим полями.
Приклад
Використовуйте margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Спробуйте самі »
Значення inherit
В цьому прикладі ліве поле елемента <p class="ex1"> успадкує від батьківського елемента (<div>):
Приклад
Використання спадкового значення:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Спробуйте самі »
