Marginesy CSS

Margines tego elementu wynosi 70px.

Spróbuj sam

Marginesy CSS

CSS margin Właściwość tworzy przestrzeń wokół elementu poza zdefiniowanym krawędzią.

Przez CSS można w pełni kontrolować marginesy. Istnieją właściwości do ustawienia marginesów dla każdej strony (górnej, prawej, dolnej i lewej) elementu.

Margin - pojedyncza strona

CSS ma właściwości do określania marginesów dla każdej strony elementu:

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

Wszystkie właściwości marginesów mogą być ustawione na następujące wartości:

  • auto - marginesy są obliczane przez przeglądarkę
  • length - określa marginesy w jednostkach takich jak px, pt, cm itp.
  • % - określa marginesy jako procent szerokości elementu zawierającego
  • inherit - określa, że marginesy mają być dziedziczone od elementu nadrzędnego

Wskazówka:Dopuszczalne są wartości ujemne.

Przykład

Ustaw różne marginesy dla czterech stron elementu <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Spróbuj sam

Margin - skrócona właściwość

Aby skrócić kod, można指定 wszystkie właściwości marginesów zewnętrznych w jednej właściwości.

margin Właściwość jest skróconą wersją poniższych właściwości marginesów zewnętrznych:

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

Mechanizm działania wygląda tak:

Jeśli margin Właściwość ma cztery wartości:

  • margin: 25px 50px 75px 100px;
    • Margines górny wynosi 25px
    • Margines prawy wynosi 50px
    • Margines dolny wynosi 75px
    • Margines lewy wynosi 100px

Przykład

Skrócona właściwość margin ustawiła cztery wartości:

p {
  margin: 25px 50px 75px 100px;
}

Spróbuj sam

Jeśli margin Właściwość ustawiła trzy wartości:

  • margin: 25px 50px 75px;
    • Margines górny wynosi 25px
    • Marginesy prawy i lewy wynoszą 50px
    • Margines dolny wynosi 75px

Przykład

Użyj skróconej właściwości margin, która ustawiła trzy wartości:

p {
  margin: 25px 50px 75px;
}

Spróbuj sam

Jeśli margin Właściwość ustawiła dwie wartości:

  • margin: 25px 50px;
    • Marginesy górne i dolne wynoszą 25px
    • Marginesy prawy i lewy wynoszą 50px

Przykład

Użyj skróconej właściwości margin, która ustawiła dwie wartości:

p {
  margin: 25px 50px;
}

Spróbuj sam

Jeśli margin Właściwość ustawiła wartość:

  • margin: 25px;
    • Wszystkie cztery marginesy zewnętrzne wynoszą 25px

Przykład

Użyj skróconej właściwości margin, aby ustawić wartość:

p {
  margin: 25px;
}

Spróbuj sam

auto wartość

Możesz ustawić atrybut margin na automatyczne, aby umieścić element w pośrodku kontenera.

Następnie, element ten zajmie określoną szerokość, a reszta przestrzeni zostanie równomiernie podzielona między granice lewe i prawe.

Przykład

Użycie margin: automatyczne:

div {
  szerokość: 300px;
  margin: automatyczne;
  border: 1px solid red;
}

Spróbuj sam

Wartość dziedziczyć

W tym przykładzie lewy margines zewnętrzny elementu <p class="ex1"> dziedziczy od elementu nadrzędnego (<div>):

Przykład

Użycie wartości dziedziczyć:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: dziedziczyć;
}

Spróbuj sam

Przeczytaj więcej

Dodatkowe książki:Model ramki: Marginesy CSS