Свойство margin

Сокращенная запись для определения внешнего отступа у элемента. Включает в себя свойства margin-top, margin-right, margin-bottom, margin-left.

margin: 15px 20px 15px 20px;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

margin: 0;

Убирает все внешние отступы у элемента

margin: 15px;

Используя один параметр. Задает внешний отступ со всех сторон

<style>
.example-2 {
    border: 1px dashed #ccc;
}
.example-2-item {
    width: 150px;
    height: 25px;
    margin: 15px;
    background: #ccc;
}
</style>
<div class="example-2">
    <div class="example-2-item"></div>
    <div class="example-2-item"></div>
</div>
margin: 20px 25px;

Используя два параметра. Первый - внешний отступ сверху и снизу, второй - внешний отступ слева и справа

<style>
.example-3 {
    border: 1px dashed #ccc;
}
.example-3-item {
    width: 150px;
    height: 25px;
    margin: 20px 25px;
    background: #ccc;
}
</style>
<div class="example-3">
    <div class="example-3-item"></div>
    <div class="example-3-item"></div>
</div>
margin: 5px 20px 20px;

Используя три параметра. Первый - внешний отступ сверху, второй - внешний отступ справа и слева, третий - внешний отступ снизу

<style>
.example-4 {
    border: 1px dashed #ccc;
}
.example-4-item {
    width: 150px;
    height: 25px;
    margin: 5px 20px 20px;
    background: #ccc;
}
</style>
<div class="example-4">
    <div class="example-4-item"></div>
    <div class="example-4-item"></div>
</div>
margin: 10px 20px 30px 15px;

Используя четыре параметра. Первый - внешний отступ сверху, второй - внешний справа, третий - внешний отступ снизу, четвертый - внешний отступ слева

<style>
.example-5 {
    border: 1px dashed #ccc;
}
.example-5-item {
    width: 150px;
    height: 25px;
    margin: 10px 20px 30px 15px;
    background: #ccc;
}
</style>
<div class="example-5">
    <div class="example-5-item"></div>
    <div class="example-5-item"></div>
</div>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии