When browsing the website, we will find that the content of the page is divided according to regions. In the page, each area carries different content, so that although the content of the web page is scattered, it is still clear and organized in layout. For example, the design website shown in Figure 1.
Figure 1 Design website
In the website page shown in Figure 1, these areas that host content are called box models. The box model treats the elements in the HTML page as a square box, which is a container that holds content. Each square consists of the element's content, padding, border, and margin.
In order to understand the CSS box model more vividly, we first start with the composition of mobile phone boxes that are common in life. A complete cell phone box usually contains the phone, padding foam and a cardboard box to hold the phone. If you imagine a mobile phone as an HTML element, then the mobile phone box is a CSS box model, where the mobile phone is the content of the CSS box model, the thickness of the padding foam is the inner margin of the CSS box model, and the thickness of the paper box is the border of the CSS box model. as shown in picture 2. When multiple mobile phone boxes are placed together, the distance between them is the margin of the CSS box model.
Figure 2 The composition of the mobile phone box
All elements and objects in the web page are composed of the basic structure shown in Figure 2, and present a rectangular box effect. From the browser's perspective, a web page is the result of multiple boxes nested inside each other. Among them, the inner margin appears around the content area. When adding a background color or background image to an element, the background color or background image of the element will also appear in the inner margin. The outer margin is the distance between the element and adjacent elements. If you define a border attribute for an element, the border will appear between the padding and the margin.
It should be noted that although the box model has basic properties such as padding, border, margin, width and height, it does not require each element to define these properties.