• Artykuł

     

Encyklopedia: Jak określić marginesy na stronie WWW za pomocą CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-09-13

Każdy element w dokumencie tworzy prostokątny obszar, zwany pudełkiem. Składa się on z zawartości, marginesów wewnętrznych, marginesów zewnętrznych oraz ramki (Rys. 1.).

Rys. 1. Model pudełkowy CSS.

Marginesy zewnętrzne (margin) są stosowane dla określenia odległości pomiędzy elementami. W przypadku definicji jednakowych marginesów dla wszystkich kierunków, należy posłużyć się następującą konstrukcją:

selektor {
    margin: wielkość;
}

Do ustalania wielkości marginesów możemy wykorzystać dowolną jednostkę miary w CSS (zob. Jak określić wielkość w CSS).

Jeśli chcemy ustalić tylko marginesy dla wybranego kierunku, wtedy stosujemy następujące właściwości:

  • margin-top – margines górny,
  • margin-bottom – margines dolny,
  • margin-right – prawy margines,
  • margin-left – lewy margines.

W pliku CSS należy posłużyć się następującą konstrukcją:

selektor {
    margin-top: wielkość;
    margin-right: wielkość;
    margin-bottom: wielkość;
    margin-left: wielkość; }

Jeśli określamy wszystkie wielkości, możemy wykorzystać następującą wersję:

selektor { margin: wielkość_top wielkość_right wielkość_bottom wielkość_left; }

Marginesy wewnętrzne (padding) służą do definiowania odległości pomiędzy zawartością a obramowaniem elementu. Podobnie, jak w przypadku marginesów zewnętrznych, jeśli definiujemy jednakowe marginesy dla wszystkich kierunków, należy posłużyć się następującą konstrukcją:

selektor {
    padding: wielkość; }

Jeśli chcemy ustalić marginesy dla wybranego kierunku, stosujemy następujące właściwości:

  • padding-top – wewnętrzny margines górny,
  • padding-bottom – wewnętrzny margines dolny,
  • padding-right – prawy wewnętrzny margines,
  • padding-left – lewy wewnętrzny margines.

W pliku CSS należy posłużyć się następującą konstrukcją:

nazwa_elementu{
    padding-top: wielkość;
    padding-right: wielkość;
    padding-bottom: wielkość;
    padding-left: wielkość; }

Jeśli określamy wszystkie wielkości, możemy wykorzystać następującą wersję:

selektor { padding: wielkość_top wielkość_right wielkość_bottom wielkość_left; }

Przykład

Poniżej zaprezentowano przykład, w którym przedstawiono zastosowanie marginesów na stronie WWW:

<html>
<head>
<title>Jak określić marginesy na stronie WWW za pomocą CSS</title>
<style type="text/css">
body{
    margin-top: 20px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 70px; }
h1 { border:solid 1px black; }
p{
    padding: 20px 20px 20px 80px;
    border:solid 1px black; }
</style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Powyższy kod wyświetli stronę internetową, w której wszystkie elementy, zawierające się w treści strony, będą oddzielone marginesami o wartościach (kolejno: górny, prawy, dolny, lewy) 20px, 40px, 10px, 70px. Dodatkowo elementy, zawarte wewnątrz znacznika <p>, będą oddzielone od obramowania marginesem wewnętrznym o wartościach (górny, prawy, dolny, lewy) 20px, 20px, 20px, 80px. Wynik działania powyższego kodu został przedstawiony na Rys. 2.

Rys. 2. Strona prezentująca przykładowe użycie wartości margin oraz padding.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać marginesy na stronie WWW w samouczku: