CSS
Marginesy

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

Uwagi

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;
}

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 */
}