Marginesy CSS
Marginesy służą do tworzenia przestrzeni wokół elementów, poza zdefiniowanymi granicami.
Marginesy CSS
Właściwości CSS marginsłużą do tworzenia przestrzeni wokół elementów, poza zdefiniowanymi granicami.
Dzięki CSS masz pełną kontrolę nad marginesami. Istnieją właściwości do ustawiania marginesów dla każdej strony elementu (góra, prawo, dół i lewy).
Marża — poszczególne strony
CSS ma właściwości określające margines dla każdej strony elementu:
margin-topmargin-rightmargin-bottommargin-left
Wszystkie właściwości marginesu mogą mieć następujące wartości:
- auto - przeglądarka oblicza marżę
- długość - określa margines w px, pt, cm itp.
- % - określa margines w % szerokości elementu zawierającego
- dziedzicz - określa, że margines powinien być dziedziczony po elemencie nadrzędnym
Wskazówka: dozwolone są wartości ujemne.
Przykład
Ustaw różne marginesy dla wszystkich czterech stron elementu <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Marża — skrócona własność
Aby skrócić kod, możliwe jest określenie wszystkich właściwości margin w jednej właściwości.
Nieruchomość marginjest skróconą własnością dla następujących indywidualnych właściwości marży:
margin-topmargin-rightmargin-bottommargin-left
Oto jak to działa:
Jeśli marginwłaściwość ma cztery wartości:
- margines: 25px 50px 75px 100px;
- górny margines to 25px
- prawy margines to 50px
- dolny margines to 75px
- lewy margines to 100px
Przykład
Użyj skróconej własności margin z czterema wartościami:
p {
margin: 25px 50px 75px 100px;
}
Jeśli marginwłaściwość ma trzy wartości:
- margines: 25px 50px 75px;
- górny margines to 25px
- marginesy prawy i lewy to 50px
- dolny margines to 75px
Przykład
Użyj skróconej własności margin z trzema wartościami:
p {
margin: 25px 50px 75px;
}
Jeśli marginwłaściwość ma dwie wartości:
- margines: 25px 50px;
- Marginesy górny i dolny to 25px
- marginesy prawy i lewy to 50px
Przykład
Użyj skróconej własności margin z dwiema wartościami:
p {
margin: 25px 50px;
}
Jeśli marginwłaściwość ma jedną wartość:
- margines: 25px;
- wszystkie cztery marginesy to 25px
Przykład
Użyj skróconej własności margin z jedną wartością:
p {
margin: 25px;
}
Auto wartość
Możesz ustawić właściwość margin na , autoaby poziomo wyśrodkować element w jego kontenerze.
Element zajmie wtedy określoną szerokość, a pozostałe miejsce zostanie równo podzielone między lewy i prawy margines.
Przykład
Użyj marginesu: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Odziedziczona wartość
W tym przykładzie lewy margines elementu <p class="ex1"> może być dziedziczony z elementu nadrzędnego (<div>):
Przykład
Użycie wartości dziedziczenia:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}