Margin HTML – Margines HTML
Odstęp pomiędzy poszczególnymi elementami w języku HTML uzyskujemy poprzez margines. Margines przypisywany jest indywidualnie do każdego elementu html. Możemy dowolnie modyfikować odstęp z czterech stron danego elementu, dlatego istnieją cztery różne rodzaje marginesu:
margin-top /* górny margines */ margin-right /* prawy margines */ margin-bottom /* dolny margines */ margin-left /* lewy margines */
Można pokusić się o stwierdzenie, że margines to nie jest do końca część elementu, a raczej jedynie jego odstęp. Obszar objęty marginesem nie przyjmuje tła elementu html przypisanego do niego, tylko jego rodzica.
Wartość marginesu wyrażana jest najczęściej w px
. Sposobów definiowania marginesów jest kilka. Możemy np. zdefiniować wszystkie cztery marginesy w jednym zapisie.
Margin top=right=bottom=left
margin: 20px; /* top=right=bottom=left */ margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px;
Margin top, right, bottom, left
margin: 10px 20px 30px 40px; /* top, right, bottom, left */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
Jeśli zapisujemy marginesy używając jednej deklaracji CSS, musimy pamiętać, że zawsze zaczynamy tą deklarację od marginesu górnego, a następnie poruszamy się zgodnie z ruchem wskazówek zegara (górny, prawy, dolny, lewy).
Margin top=bottom, right=left
margin: 20px 30px; /* top=bottom, right=left */ margin-top: 20px; margin-right: 30px; margin-bottom: 20px; margin-left: 30px;
Margin top, right=left, bottom
margin: 20px 0 30px; /* top, right=left, bottom */ margin-top: 20px; margin-right: 0; margin-bottom: 30px; margin-left: 0;
Jeśli deklarujemy zerową wartość, to dobrą praktyką jest nie dopisywanie wartości px.