Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

 

Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.

W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.

Informacja: Bloki

Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.

W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.

margines zewnętrzny

ramka

margines wewnętrzny

element

Jasny szary wskazuje części układu strony.

 

 

 

element

Tak wygląda to w przeglądarce.

Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.

Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.

margines zewnętrzny

ramka

margines wewnętrzny

element

Ten element ma zielone tło.

 

 

 

element

Tak wygląda to w przeglądarce.

Ramki

Możesz użyć ramek do dekoracji elementów liniami lub blokami.

Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności border. Określ szerokość (zwykle w pikselach), styl i kolor.

Istnieją następujące style:

solid
dotted
dashed
double
inset
outset
ridge
groove

Możesz także ustawić styl na none lub hidden, aby usunąć ramkę, lub ustawić kolor na transparent, aby ustawić przezroczystą ramkę bez dotykania układu.

Aby określić osobno każdą krawędź ramki, użyj własności: border-top (góra), border-right (prawo), border-bottom (dół), border-left (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.

Przykłady
Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka:

h3 {

 border-top: 4px solid #7c7; /* mid green */
 background-color: #efe;     /* pale green */
 color: #050;                /* dark green */
 }

Wygląda to tak:

Nagłówek w dobrym stylu

Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:

img {border: 2px solid #ccc;}

Rezultat jest następujący:

Obrazek: Image:Blue-rule.png

Marginesy zewnętrzne i wewnętrzne

Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.

Użyj własności margin lub padding, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.

Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).

Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.

Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.

Przykład
Ta reguła oznacza akapity z klasą remark poprzez dodanie czerwonej ramki wokół nich.

Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.

Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:

p.remark {

 border: 2px solid red;
 padding: 4px;
 margin-left: 24px;
 }

Wynik wygląda tak:

Oto zwykły akapit.

A to akapit z klasą remark.

Więcej szczegółów
Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany.

Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.

Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.

Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału model blokowy.

Zadanie: Dodawanie ramek

Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:

h3 {border-top: 1px solid gray;}

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:

li {

 list-style: lower-roman;
 margin-bottom: 8px;
 }

Odśwież okno przeglądarki, aby zobaczyć wynik:

(A) Oceany

  • Arktyczny
  • Atlantycki
  • Spokojny
  • Indyjski
  • Południowy

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Wyzwanie
Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

. . .

(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)

Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: Układ

Autorzy i etykiety dokumentu

Etykiety: 
 Ostatnia aktualizacja: teoli,