Margin xassəsi
margin xassəsi elementin xarici
boşluğunu təyin edir. Xassənin dəyəri kimi
istənilən ölçü vahidləri
ya da brauzerə elementin boşluğunu müstəqil hesablamağa imkan verən
auto açar sözü ola bilər. Standart olaraq hər brauzer
elementlərə müxtəlif boşluqlar əlavə edə bilər.
Bu xassə aşağıdakı xassələr üçün qısadır:
margin-top,
margin-right,
margin-bottom,
margin-left.
Sintaksis
selektor {
margin: deyer;
}
Dəyərlərin sayı
margin xassəsi 1,
2, 3 ya da 4 dəyər qəbul edir,
boşluqla ayrılan:
| Say | Təsvir |
|---|---|
1 |
Bir dəyər elementin bütün tərəflərindən boşluq təyin edir. |
2 |
Birinci dəyər yuxarı və aşağıdan boşluq təyin edir, ikinci isə sağ və soldan. |
3 |
Birinci dəyər yuxarıdan boşluq təyin edir, ikinci - sağ və soldan, üçüncü isə aşağıdan. |
4 |
Birinci dəyər yuxarıdan boşluq təyin edir, ikinci - sağdan, üçüncü - aşağıdan, dördüncü isə soldan. |
Nümunə
İndi bizim boşluqsuz bir blokumuz olacaq:
<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;
}
:
Nümunə
İndi bloka 10px boşluq təyin edək:
<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;
}
:
Nümunə
Bloka yuxarı və aşağıdan 10px,
sol və sağdan isə 20px boşluq təyin edək:
<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;
}
:
Nümunə
Bloka yuxarıdan 5px,
sağdan 15px, aşağıdan 25px
və soldan 35px boşluq təyin edək:
<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;
}
:
Həmçinin bax
-
paddingxassəsi,
daxili boşluq təyin edir