Właściwość margin
Właściwość margin ustawia zewnętrzny
odstęp elementu. Wartością właściwości są
dowolne jednostki
wymiarów lub kluczowa właściwość auto,
pozwalająca przeglądarce samodzielnie obliczać
odstęp elementu. Domyślnie każda przeglądarka może
dodawać elementom różne odstępy.
Właściwość jest skrótem dla właściwości
margin-top,
margin-right,
margin-bottom,
margin-left.
Składnia
selektor {
margin: wartość;
}
Liczba wartości
Właściwość margin przyjmuje 1,
2, 3 lub 4 wartości,
wymieniane z spacją:
| Liczba | Opis |
|---|---|
1 |
Jedna wartość ustawia odstęp ze wszystkich stron elementu. |
2 |
Pierwsza wartość ustawia odstęp od góry i od dołu, a druga - od prawej i od lewej. |
3 |
Pierwsza wartość ustawia odstęp od góry, druga - od prawej i od lewej, a trzecia - od dołu. |
4 |
Pierwsza wartość ustawia odstęp od góry, druga - od prawej, trzecia - od dołu, a czwarta - od lewej. |
Przykład
Teraz będziemy mieli blok bez odstępów:
<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;
}
:
Przykład
A teraz blokowi ustawimy odstęp 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;
}
:
Przykład
Ustawmy blokowi odstęp 10px od góry
i od dołu oraz 20px - od lewej i od prawej:
<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;
}
:
Przykład
Ustawmy blokowi odstęp 5px od góry,
15px od prawej, 25px od dołu i 35px
od lewej:
<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;
}
:
Zobacz też
-
właściwość
padding,
która ustawia wewnętrzny odstęp