Tworząc stronę internetową przygotowujemy jej strukturę mając na względzie jej czytelność i estetykę. Aby odseparować poszczególne elementy na stronie stosujemy marginesy.
Margin
Margin – odstęp na zewnątrz elementu.
selektor { margin: wartość; }Możemy ustawić margines:
- margin-left – lewy
- margin-right – prawy
- margin-top – górny
- margin-bottom – dolny
p { margin-top: 50px; }Margines górny o wartości 50px (od czerwonej linii).
Teraz ustawimy wszystkie marginesy w jednej deklaracji.
p { margin: 50px 30px 20px 25px; }W takim zapisie marginesy są ustawiane w kolejności góra, prawy, dół, lewy.
Margines górny 50px, prawy 30px, dolny 20px lewy 25px.
Padding
Padding – odstęp wewnątrz elementu.
selektor { padding: wartość; }Możemy ustawić padding:
- padding-left – lewy
- padding-right – prawy
- padding-top – górny
- padding-bottom – dolny
p { padding-top: 50px; }Padding górny o wartości 50px (do czerwonej linii).
Teraz ustawimy padding w jednej deklaracji.
p { padding: 50px 30px 20px 25px; }W takim zapisie padding jest ustawiany tak samo jak w przypadku marginesów w kolejności góra, prawy, dół, lewy.
Padding górny 50px, prawy 30px, dolny 20px lewy 25px.