In CSS, the Box Model is the basic concept used to describe and layout HTML elements. It regards each HTML element as a rectangular box, which includes several important parts such as content, padding, border and margin. Together, these parts determine the size and positioning of elements on the page.
Here is an explanation of the various parts of these box models:
-
Content: This is the part of the box that actually displays content, such as text, pictures, etc. Its width and height are determined by the element's width and height attributes.
-
Padding: Padding is the white space between the content and the border. It can be used to control the distance between the content and the border, which affects the size and appearance of the box. The padding can be set separately in the four directions of top, right, bottom, and left, or they can be set uniformly.
-
Border: A border is a line or area that surrounds content and padding, and is used to define the boundaries of a box. The color, style and width of the border can be set, such as solid line, dashed line, dotted line, etc. The width of the border affects the overall size of the box.
-
Margin: The margin is the blank space between the box and adjacent elements, which is used to control the distance between the element and other elements. Margins can be set separately in the top, right, bottom, and left directions, or they can be set uniformly. Margins affect the layout and positioning of boxes on the page.
Combining the above four parts, the total width of an element can be calculated as: content width + left padding + right padding + left border + right border + left margin + right margin, and the total height is calculated similarly.
The understanding of the box model is very important to control the layout and style of elements. You can adjust the inner margin, border, outer margin, etc. through CSS properties, so as to achieve different design effects and page layouts.
The following is an example of the box model of Bootstrap's class container-fluid:
The following is an example of the box model of Bootstrap's class container:
