Przegląd modelu okienkowego CSS

Model ramkowy CSS (Box Model) określa sposób, w jaki ramka elementu przetwarza zawartość elementu,padding,krawędzie i Marginesy sposobem.

Przegląd modelu okienkowego CSS

CSS okienkowy model

Najbardziej wewnętrzna część ramki elementu to rzeczywista zawartość, bezpośrednio otaczająca zawartość to padding. Padding prezentuje tło elementu. Krawędzie paddingu to krawędzie. Poza krawędziami są marginesy, które domyślnie są przezroczyste i nie zakrywają żadnych elementów za nimi.

Wskazówka:Tło jest zastosowane do obszaru składa się z zawartości, paddingu i krawędzi.

Padding, krawędzie i marginesy są opcjonalne, wartość domyślna to zero. Jednak wiele elementów będzie miało ustawione marginesy i paddingi przez stylówki użytkownika. Można te wartości zastąpić, ustawiając margines i padding elementu na zero. Można to zrobić osobno, lub użyć selektora uniwersalnego, aby ustawić wartości dla wszystkich elementów:

* {
  margin: 0;
  padding: 0;

W CSS, width i height oznaczają szerokość i wysokość obszaru zawartości. Zwiększenie paddingu, krawędzi i marginesów nie wpływa na rozmiar obszaru zawartości, ale zwiększa całkowity rozmiar ramki elementu.

Załóżmy, że każdy bok ramki ma 10 pikseli marginesu i 5 pikseli paddingu. Jeśli chcemy, aby ta ramka elementu osiągnęła szerokość 100 pikseli, musimy ustawić szerokość zawartości na 70 pikseli. Zobacz obraz poniżej:

CSS okienkowy model przykład 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;

Wskazówka:Padding, krawędzie i marginesy mogą być zastosowane do wszystkich boków elementu, lub do pojedynczego boku.

Wskazówka:Marginesy mogą mieć wartości ujemne i w wielu przypadkach wartości ujemne są używane dla marginesów.

Zgodność z przeglądarkami

Gdy odpowiedni DTD zostanie ustawiony dla strony, większość przeglądarek będzie prezentować zawartość zgodnie z powyższym obrazem. Jednakże, prezentacja w przeglądarce IE 5 i 6 jest niewłaściwa. Zgodnie z normami W3C, przestrzeń zajmowana przez zawartość elementu jest ustawiana za pomocą atrybutu width, podczas gdy wartości padding i border wokół zawartości są obliczane osobno. Niestety, IE5.X i 6 używają własnego, niestandardowego modelu w trybie dziwactwa. Atrybut width tych przeglądarek nie oznacza szerokości zawartości, ale sumy szerokości zawartości, wewnętrznego marginesu i krawędzi.

Mimo że istnieją metody rozwiązania tego problemu. Jednak najlepszym rozwiązaniem na dzień dzisiejszy jest unikanie tego problemu. Oznacza to, że zamiast dodawać do elementów wewnętrzne marginesy o określonej szerokości, spróbuj dodać wewnętrzne marginesy lub marginesy zewnętrzne do elementów rodzicielskich i potomnych.

Tłumaczenie terminów

  • element: element.
  • padding: wewnętrzny margines, czasami tłumaczony również jako wypełnienie.
  • border: krawędź.
  • margin: zewnętrzny margines, czasami tłumaczony również jako pustka lub pustka krawędziowa.

W codew3c, nazywamy padding i margin jednolicie wewnętrznymi i zewnętrznymi marginesami. Pustka wewnątrz krawędzi to margines wewnętrzny, a pustka na zewnątrz krawędzi to margines zewnętrzny, łatwo zapamiętać, prawda? :)