Својството margin
Својството margin поставува надворешен
отстап на елемент. Вредност на својството се
било кои единици
за димензии или клучно својство auto,
кое и овозможува на прелистувачот самостојно да пресметува
отстап на елемент. По стандард, секој прелистувач може
да додава различни отстапи на елементи.
Својството е кратенка за својствата
margin-top,
margin-right,
margin-bottom,
margin-left.
Синтакса
селектор {
margin: вредност;
}
Број на вредности
Својството margin прифаќа 1,
2, 3 или 4 вредности,
наведени преку празно место:
| Број | Опис |
|---|---|
1 |
Една вредност задава отстап од сите страни на елементот. |
2 |
Првата вредност задава отстап одозгора и одоздола, а втората - оддесно и одлево. |
3 |
Првата вредност задава отстап одозгора, втората - оддесно и одлево, а третата - одоздола. |
4 |
Првата вредност задава отстап одозгора, втората - оддесно, третата - одоздола, а четвртата - одлево. |
Пример
Сега ќе имаме блок без отстапи:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 0;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Пример
А сега на блокот ќе му зададеме отстап од 10px:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Пример
Ќе му зададеме на блокот отстап од 10px одозгора
и одоздола и 20px - одлево и оддесно:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px 20px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Пример
Ќе му зададеме на блокот отстап од 5px одозгора,
15px оддесно, 25px одоздола и 35px
одлево:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 5px 15px 25px 35px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
Погледнете исто така
-
својството
padding,
кое задава внатрешен отстап