Свойство 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>