margin
Ustawia zewnętrzny odstęp elementu od sąsiadów.
- Wartość domyślna
0- Dziedziczona
- Nie
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy poza wewnętrznymi elementami tabel
- JavaScript
element.style.margin = "16px auto"
Przykład
#.page {
max-width: 420px;
margin: 0 auto;
}
.page h2 {
margin-bottom: 8px;
}<div class="page stage">
<h2 style="margin-top: 0">Wyśrodkowana strona</h2>
<p style="margin: 0">Blok o maksymalnej szerokości 420px stoi na środku dzięki margin: 0 auto.</p>
</div>Definicja i zastosowanie
#Właściwość margin to skrót dla czterech marginesów: margin-top, margin-right, margin-bottom i margin-left. Margines to przezroczysta przestrzeń na zewnątrz obramowania, która odsuwa element od innych.
Jedna wartość ustawia wszystkie strony, dwie osobno pion i poziom, trzy górę, poziom i dół, a cztery kolejno górę, prawą, dół i lewą stronę (zgodnie z ruchem wskazówek zegara). Wartość auto w poziomie wyśrodkowuje blok o określonej szerokości.
Uwaga na łączenie się marginesów: pionowe marginesy sąsiednich bloków nie sumują się, tylko wybierany jest większy. W kontenerach flex i grid to zjawisko nie występuje.
Składnia
#margin: <góra> <prawa>? <dół>? <lewa>?;Wartości
#- Brak marginesu. Paski tła rodzica przylegają do elementu.
<długość>
Jednakowy margines 16px z każdej strony.pion poziom
8px u góry i na dole, 40px po bokach.auto
autow poziomie wyśrodkowuje blok o znanej szerokości.wartość ujemna
Ujemny margines przysuwa element, a nawet wysuwa go poza rodzica.
Wartości w praktyce
#0
.demo { margin: 0; }16px
.demo { margin: 16px; }8px 40px
.demo { margin: 8px 40px; }12px auto
auto w poziomie wyśrodkowuje blok o znanej szerokości..demo { margin: 12px auto; }-8px
.demo { margin: -8px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Odstępy między elementami w rzędzie lub siatce ustawiaj przez
gap, a nie marginesy. - Właściwości logiczne
margin-inlineimargin-blockdziałają poprawnie także w językach pisanych od prawej do lewej.
Powiązane hasła
#- paddingUstawia wewnętrzny odstęp między treścią a obramowaniem.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- margin-inlineUstawia marginesy na początku i końcu wiersza. Logiczna wersja margin-left i margin-right, która rozumie kierunek pisma.
Widzisz błąd albo brakuje przykładu? Napisz do nas.