Programowanie

User · 2009-12-03 17:04:14

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
* Ustaw margines wewnętrzny w elemencie

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

* Pokaż przykład

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

* Pokaż przykład

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

* Pokaż przykład

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

* Pokaż przykład

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.

Programowanie

#1 2009-12-03 17:04:14

Lekcja 10: Margines wewnętrzny i zewnętrzny

Stopka forum