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հատկությունը,
որը սահմանում է ներքին բաց