Lekcja 10: Margines wewnętrzny i zewnętrzny

W poprzedniej lekcji zostałeś wprowadzony w model blokowy. W tej lekcji, popatrzymy jak możesz zmienić prezentację elementów poprzez ustawienie właściwości margin i padding.

Ustaw margines zewnętrzny w elemencie

Element ma cztery strony: prawą, lewą, dolną i górną. margin określa odległość każdej ze stron do sąsiedniego elementu (lub obramowania dokumentu). Patrz także na diagram w lekcji 9 dla ilustracji.

Jako pierwszy przykład, popatrzymy jak definiuje się margines zewnętrzny dla dokumentu tzn. dla elementu <body>. Poniższa ilustracja przedstawia margines zewnętrzny na stronie jaki sobie wybraliśmy.

Przykłady marginesów

Kod CSS dla przykładu będzie wyglądał następująco:


body {
	margin-top: 100px;
	margin-right: 40px;
	margin-bottom: 10px;
	margin-left: 70px;
}

Możesz także wybrać bardziej elegancką kompilację:


body {
	margin: 100px 40px 10px 70px;
}

Możesz ustawić marginesy zewnętrzne w ten sam sposób dla prawie każdego elementu. Na przykład, możesz zdefiniować marginesy zewnętrzne dla wszystkich akapitów zaznaczonych elementem <p>:


body {
	margin: 100px 40px 10px 70px;
}

p {
	margin: 5px 50px 5px 50px;
}

Ustaw margines wewnętrzny w elemencie

Margines wewnętrzny można także zrozumieć jako "wypełnianie". To ma sens gdyż margines wewnętrzny nie dotyczy odległości między elementami a jedynie definiuje wewnętrzną odległość między obramowaniem a zawartością elementu.

Użyteczność marginesu wewnętrznego można zilustrować patrząc na prosty przykład, w którym wszystkie nagłówki posiadają kolor tła:


h1 {
	background: yellow;
}

h2 {
	background: orange;
}

Poprzez zdefiniowanie marginesu wewnętrznego dla wszystkich nagłówków, zmieniasz wielkość wypełniania wokół tekstu dla każdego nagłówka:


h1 {
	background: yellow;
	padding: 20px 20px 20px 80px;
}

h2 {
	background: orange;
	padding-left:120px;
}

Podsumowanie

Jesteś teraz na drodze do opanowania modelu blokowego w CSS. W następnej lekcji, popatrzymy bliżej na możliwości ustawiania obramowań w różnych kolorach i kształtach dla elementów.