XHTML+CSS basic Knowledge (iii): Box model

Four elements of the box model: content, Border (border), padding (padding), margin (margin).

Each element in the page is considered a rectangular box with content, padding, borders, and margins.

1. What are the four elements of the box model?

The inner margin appears around the content area, and if you add a background to the element, the background is applied to the area where the content and padding are added.

Adding borders adds a border outside the area of the padding, which can have multiple styles, such as lines, dashes, dots, and so on.

Outside the bounding rectangle is the margin, the margin is transparent, and it is generally used to control the spacing between elements.

2. How is the width of a box in the box model calculated? Is it the same in IE?

In CSS, width and height are the widths and heights of the content area, and increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

However, in earlier versions of IE (including IE6), using their own non-standard box models in promiscuous mode, the width property of these browsers is not the contents of the content, but the sum of content, padding and border width, so be sure to note the writing document declaration (DTD) to avoid this situation.

3. How is the margin calculated when the two boxes are placed horizontally? How is vertical placement calculated?

<div style= "width:100px;height:100px;float:left;margin-right:10px;" > Layer One </div>

<div style= "width:100px;height:100px;float:left;margin-left:20px;" > Layer Two </div>

The above code is displayed on the page as two layers horizontally, with a 30px gap in the middle, which proves that their spacing is the superposition of the left and right margins of two boxes when the boxes are placed horizontally.

<div style= "width:100px;height:100px;margin-bottom:10px;" > Layer Three </div>

<div style= "width:100px;height:100px;margin-top:20px;" > Layer Four </div>

The above code is shown on the page as two layers vertical, with 20px gap in the middle, which proves that when the box is placed vertically, their spacing is the larger of the upper and lower margins of the two boxes.

<div style= "width:100px;height:100px;margin-top:20px;" >

<div style= "width:50px;height:50px;margin-top:30px;" ></div>

</div>

The above code is shown in the page as the outer margin of 30px, while the inner layer is close to the upper left corner of the display, which proves that the two boxes nesting place when their upper margin will take the larger of the display.

<div style= "margin-top:30px;margin-bottom:20px;" ></div>

The above code is shown in the page as a gap 30px away from the other adjacent boxes, thus proving that if there is no content in a box and the width of the box is not specified, then the upper and lower margins of the box will be merged into the larger one for display.

<div style= "margin-top:30px;margin-bottom:20px;" ></div>

<div style= "margin-top:20px;" ></div>

The above code is shown in the page as 30px away from the other adjacent boxes, thus proving that if the adjacent two boxes are not limited to a wide height, and there is no content, then their margins will be merged to show the larger one.

In addition, margin overlays occur only in the vertical margins of the block box in the normal document flow, and the margins of the inline box, the float box, and the decision position box are not superimposed.

Most problems with margin overlays can be fixed by adding a little padding or a small border with the same element background.

4. Since adding padding to a box can cause a wide variation in height, how do you make a box with a certain distance between the content and the frame, and not affect the width of the box itself?

You can use box nesting to solve this problem by placing the box containing the contents inside another box, adding an outer margin to it, or adding an inner margin to the outer box.

XHTML+CSS basic Knowledge (iii): Box model