Уроки CSS |
Атрибут margin в CSS |
margin
– это атрибут, определяющий пространство (отступы) вокруг элемента, к которому применён.
Существует стандартные значения атрибута margin:
• auto (по центру)
• top
• left
• right
• bottom
Когда вы указываете некоторые значения (в пикселях) для этого атрибута – их нужно писать так:
margin: 10px 20px 30px
(отступ: сверху; слева; снизу)
Так же можно написать :
margin: 50px
- и отступы на 50px будут вокруг всего элемента
Помимо этого, отступы можно задавать в процентах:
margin: 30%
- и отступы на 30% будут вокруг всего элемента
Теперь для закрепления всего выше написанного сделаем несколько примеров.
Сделаем два блока с фиксированными размерами. В этих блоках будут размещены короткие фразы, но у одной значения отступов будут вдвое больше другой. Блокам будет задан атрибут:
margin: auto;
<style>
#my_div_1 {
background: #FFCFCF;
border: 1px solid #FF9B9B;
width: 450px;
height: 150px;
margin: auto;
}
p.my_marg_p1 {
font-size: 16px;
color: White;
margin: 20px 40px 20px;
}
p.my_marg_p2 {
font-size: 16px;
color: White;
margin: 50px 80px 50px;
}
</style>
<div id="my_div_1">
<p class="my_marg_p1">Отступ сверху слева снизу</p>
Какой-то текст
</div>
<br>
<br>
<div id="my_div_1">
<p class="my_marg_p2">Большой отступ сверху слева снизу</p>
Какой-то текст
</div>
Отступ сверху слева снизу
Какой-то текстБольшой отступ сверху слева снизу
Какой-то текст
Теперь сделаем пример, в котором будет большой блок с атрибутом: margin: auto;
Внутри этого блока будет другой блок (поменьше), которому будет задан атрибут: margin: 18%;
А внутри этого малого блока будет находится третий, самый маленький блок с параметром - margin: 40px;
<style>
#my_div_2 {
background: #C5FFCB;
border: 2px solid #3DFF50;
width: 450px;
height: 400px;
margin: auto;
}
#my_div_3 {
background: #A9F938;
border: 2px solid #1DF8FF;
width: 200px;
height: 200px;
margin: 18%;
}
#my_div_4 {
background: #F8FFAA;
color: #000000;
font-size: 12px;
margin: 40px;
}
</style>
<div id="my_div_2">
<div id="my_div_3">
<div id="my_div_4">
До ближайшей к Солнцу звезды - Альфа Центавра - 4,2 светового года,
или примерно 40 триллионов километров.
</div>
</div>
</div>
◄ Предыдущий урок | Содержание | Следующий урок ► |