Najnowsze tutoriale tworzenie stron internetowych
 

CSS marginesy


CSS Margin Properties

CSS margin właściwości są wykorzystywane do generowania przestrzeń wokół elementów.

W margin właściwości ustawić rozmiar białej przestrzeni poza granicę.

Ten element ma margin na 80px.


CSS Margins

CSS margin właściwości ustawić rozmiar białej przestrzeni poza granicę.

UwagaUwaga: margins są całkowicie przejrzyste - i nie może mieć kolor tła!

Z CSS, masz pełną kontrolę nad margins . Są to właściwości CSS do ustawiania margin dla każdej strony elementu (górny, prawy, dolny i lewy).


Margin - poszczególnych boków

CSS ma właściwości określający margin dla każdej strony elementu:

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

Wszystkie margin właściwości może mieć następujące wartości:

  • auto - przeglądarka oblicza margin
  • długość - określa margin w px, pt, cm , etc.
  • % - Określa margin w% szerokości elementu zawierającego
  • dziedziczy - określa, że margin powinna być dziedziczone z elementu nadrzędnego
UwagaUwaga: Można również stosować wartości ujemne na margins ;pokrywać treści.

Poniższy przykład ustawia różne margins dla wszystkich czterech bokach <p> element:

Przykład

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Spróbuj sam "

Poniższy przykład pozwala lewy margin być dziedziczone z elementu nadrzędnego:

Przykład

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Spróbuj sam "

Margin - Skrót nieruchomości

Aby skrócić ten kod, możliwe jest określenie wszystkich margin właściwości w jednym obiekcie.

margin nieruchomość jest skróconą własnością dla następujących indywidualnych margin właściwości:

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

Przykład

p {
    margin: 100px 150px 100px 80px;
}
Spróbuj sam "

Więc, oto jak to działa:

Jeśli margin Obiekt ma cztery wartości:

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

Jeśli margin Nieruchomość posiada trzy wartości:

  • margin : 25px 50px 75 pikseli;
    • górny margines wynosi 25px
    • prawy i lewy margines są 50px
    • dolny margines wynosi 75 pikseli

Jeśli margin Nieruchomość posiada dwie wartości:

  • margin : 25px 50px;
    • Górne i dolne marginesy są 25px
    • prawy i lewy margines są 50px

Jeśli margin Nieruchomość posiada jedną wartość:

  • margin : 25px;
    • wszystkie cztery marginesy są 25px

Zastosowanie automatycznego Wartość

Można ustawić margin właściwość auto do poziomo wyśrodkować element jego kontenerze.

Element będzie trwać określoną szerokość, a pozostała przestrzeń zostanie podzielona równo pomiędzy lewym i prawym margins :

Przykład

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»


Wszystkie właściwości CSS Margin

Nieruchomość Opis
margin Skrót nieruchomość do ustawiania margin właściwości w jednej deklaracji
margin-bottom Ustawia dolny margin elementu
margin-left Ustawia lewy margin elementu
margin-right Ustawia prawy margin elementu
margin-top Ustawia górny margin elementu