Szukaj…


Składnia

  • margines: <góra i prawo i dół i lewa> ;
  • margines: <top> , <lewo i prawo> , <spód> ;
  • margines: <góra i dół> , <lewo i prawo> ;
  • margines: <top> , <prawo> , <spód> , <lewy> ;
  • margin-top: <top> ;
  • margines z prawej: <prawo> ;
  • margines-dół: <spód> ;
  • margines lewy: <lewy> ;

Parametry

Parametr Detale
0 ustaw margines na brak
automatyczny służy do centrowania, poprzez równomierne ustawienie wartości z każdej strony
jednostki (np. px) lista poprawnych jednostek znajduje się w sekcji parametrów w Jednostkach
dziedziczyć odziedzicz wartość marginesu z elementu nadrzędnego
Inicjał przywrócić wartość początkową

Uwagi

Więcej na temat „Zwijających się marginesów”: tutaj .

Zastosuj margines po określonej stronie

Właściwości specyficzne dla kierunku

CSS pozwala określić daną stronę do zastosowania marginesu. Cztery właściwości przewidziane w tym celu to:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

Poniższy kod zastosuje margines 30 pikseli po lewej stronie wybranego div. Pokaż rezultat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}
Parametr Detale
margines lewy Kierunek, w którym należy zastosować margines.
30px Szerokość marginesu.

Określanie kierunku za pomocą skróconej właściwości

Standardową właściwość margin można rozwinąć, aby określić różne szerokości dla każdej strony wybranych elementów. Składnia do tego jest następująca:

margin: <top> <right> <bottom> <left>;

Poniższy przykład dotyczy marginesu o zerowej szerokości u góry div, marginesu 10 pikseli po prawej stronie, marginesu 50 pikseli po lewej stronie i marginesu 100 pikseli po lewej stronie. Pokaż rezultat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Margines załamuje się

Kiedy dwa marginesy stykają się ze sobą pionowo, są one zwinięte. Kiedy dwa marginesy stykają się poziomo, nie ulegają zwijaniu.

Przykład sąsiadujących pionowych marginesów:

Rozważ następujące style i znaczniki:

div{
    margin: 10px;
}
<div>
    some content
</div>
<div>
    some more content
</div>

Będą rozstawiane w odległości 10 pikseli, ponieważ pionowe marginesy zwiną się w jednym i drugim. (Odstępy nie będą sumą dwóch marginesów.)

Przykład sąsiadujących poziomych marginesów:

Rozważ następujące style i znaczniki:

span{
    margin: 10px;
}
<span>some</span><span>content</span>

Będą one rozstawiane w odległości 20 pikseli, ponieważ poziome marginesy nie zawijają się względem jednego i drugiego. (Odstęp będzie sumą dwóch marginesów.)

Nakładające się na różne rozmiary

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}
<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Te elementy zostaną rozmieszczone w odległości 15 pikseli w pionie. Marginesy zachodzą na siebie tak bardzo, jak to możliwe, ale większy margines określa odległość między elementami.

Nakładający się margines gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}
<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Jaki będzie odstęp między tymi dwoma tekstami? (najedź, aby zobaczyć odpowiedź)

Odstępy będą wynosić 25 pikseli. Ponieważ wszystkie cztery marginesy stykają się ze sobą, zostaną one zwinięte, wykorzystując w ten sposób największy margines z czterech.

A co jeśli dodamy jakieś obramowania do powyższego znacznika.

div{
    border: 1px solid red;
}

Jaki będzie odstęp między tymi dwoma tekstami? (najedź, aby zobaczyć odpowiedź)

Odstępy będą wynosić 59 pikseli! Teraz tylko marginesy .outer-top i .outer-bottom dotykają się nawzajem i są jedynymi zwiniętymi marginesami. Pozostałe marginesy są oddzielone granicami. Mamy więc 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (1px to granice ...)

Zwijane marginesy między elementami nadrzędnymi i podrzędnymi:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

W powyższym przykładzie obowiązuje tylko największy margines. Można się było spodziewać, że akapit zostanie umieszczony 60px od h1 (ponieważ element div ma górny margines 40px, a p ma górny margines 20px). Nie dzieje się tak, ponieważ marginesy zwijają się razem, tworząc jeden margines.

Wyśrodkuj elementy w poziomie za pomocą marginesu

Tak długo, jak element jest blokiem i ma jawnie ustawioną wartość szerokości , marginesów można używać do centrowania elementów bloku na stronie poziomo.

Dodajemy wartość szerokości, która jest mniejsza niż szerokość okna, a właściwość auto marginesu następnie rozdziela pozostałą przestrzeń na lewą i prawą stronę:

#myDiv {
 width:80%;
 margin:0 auto;
}

W powyższym przykładzie używamy skróconej deklaracji margin aby najpierw ustawić 0 na górną i dolną wartość marginesu (chociaż może to być dowolna wartość), a następnie używamy auto aby umożliwić przeglądarce automatyczne przydzielenie miejsca automatycznie wartościom lewego i prawego marginesu.

W powyższym przykładzie element #myDiv jest ustawiony na 80% szerokości, co pozostawia zużycie 20% pozostałych. Przeglądarka dystrybuuje tę wartość do pozostałych stron, więc:

(100% - 80%) / 2 = 10%

Uproszczenie własności marży

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Kolejny przykład:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Marże ujemne

Margines jest jedną z niewielu właściwości CSS, które można ustawić na wartości ujemne. Tej właściwości można używać do nakładania się elementów bez bezwzględnego pozycjonowania .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Przykład 1:

Oczywiste jest założenie, że procentowa wartość marginesu względem margin-left margin-right byłaby względna względem jego elementu macierzystego.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Ale tak nie jest, jeśli chodzi o margin-top i margin-bottom . Obie te właściwości, w procentach, nie są związane z wysokością kontenera nadrzędnego, ale z szerokością kontenera nadrzędnego.

Więc,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow