A detailed explanation of the Box Model in CSS and a detailed explanation of the CSS Box Model

A detailed explanation of the Box Model in CSS and a detailed explanation of the CSS Box Model

 

Many people are confused about the box model. The following uses a simple code to analyze the structure of the box model!

For easy viewing! Draw a table in the first div and set its size to the same size as the div content! Set the margin and padding attributes of the body to 0px;

This example uses the CSS style in the row!

The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Margin: There is no color attribute for outward expansion, so we can see that the expanded color is an external color. In this example, It is colorless!
Padding: It is filled inwards and has no color attribute. The displayed color is the color set for the internal content!