Zaloguj | Zarejestruj | FAQ
Anonymous

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.



<< Lesson 9: Model blokowy

Lesson 11: Obramowania >>