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; }

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.

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; }

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.

ŹRÓDŁO