CSS ramowy model

CSS ramowy model

Wszystkie elementy HTML można traktować jako pudełka. W CSS, gdy mowa o projektowaniu i układzie, używa się terminu „model pudełkowy” lub „model ramki”.

CSS box model is essentially a box that surrounds each HTML element. It includes: margin, border, padding, and actual content. The following image shows the box model:

CSS ramowy model

Explanations of different parts:

  • Content - The content of the box, where text and images are displayed.
  • Padding - Clear the area around the content. Padding is transparent.
  • Border - Border around the inner padding and content.
  • Margin - Clear the area outside the boundary. Margin is transparent.

The box model allows us to add borders around elements and define space between elements.

The innermost part of the element box is the actual content, directly surrounded by padding. Padding presents the background of the element. The edge of the padding is the border. Outside the border is the margin, which is transparent by default and does not block any elements behind it.

Hint:Background is applied to the area consisting of content and padding, border.

Padding, border, and margin are optional, with default values of zero. However, many elements are set by the user agent stylesheet for margin and padding. These browser styles can be overridden by setting the margin and padding of the element to zero. This can be done separately or using a universal selector to set all elements:

* {
  margin: 0;
  padding: 0;
}

In CSS, width and height refer to the width and height of the content area. Increasing padding, border, and margin does not affect the size of the content area but increases the total size of the element box.

Assuming that each side of the box has 10 pixels of margin and 5 pixels of padding. If you want this element box to reach 100 pixels, you need to set the content width to 70 pixels. See the image below:

Przykład CSS ramowego modelu 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Hint:Padding, border, and margin can be applied to all sides of an element or to a single side.

Hint:Note: Margin can be negative, and in many cases, negative margins are used.

Example

Demonstration of the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Spróbuj sam

Element's width and height

To correctly set the width and height of an element in all browsers, you need to understand how the box model works.

Important Note:When setting the width and height properties of an element with CSS, only the width and height of the content area need to be set. To calculate the complete size of the element, you must also add the padding, border, and margin.

Example

<div> Element's total width will be 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Spróbuj sam

Obliczenia następują:

320px (szerokość)
+ 20px (lewa + prawa wewnętrzna margines)
+ 10px (lewa + prawa krawędź)
+ 0px (lewy + prawy zewnętrzny margines)
= 350px

Cała szerokość elementu powinna być obliczana w następujący sposób:

Cała szerokość elementu = szerokość + lewa wewnętrzna margines + prawa wewnętrzna margines + lewa krawędź + prawa krawędź + lewy zewnętrzny margines + prawy zewnętrzny margines

Cała wysokość elementu powinna być obliczana w następujący sposób:

Cała wysokość elementu = wysokość + górna wewnętrzna margines + dolna wewnętrzna margines + górna krawędź + dolna krawędź + górny zewnętrzny margines + dolny zewnętrzny margines