3

kurs

css

Lekcja 8: Odstępy - margin, padding

css

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.

comments powered by Disqus

Do góry