CSS box model, vertical margin Merge

The CSS box model consists of four parts: content, padding (padding), border (border), margin (margin), where the Width property defined in the CSS style is defined as the breadth of the content area, and normally, when the width of the content area is set, Then set the Box's fill, border, and margin values, the size of the page that the box actually occupies in the page is calculated As:

Horizontal direction:: width+2*padding+2*border+2*border,

Vertical direction:: height+2*padding+2*border+2*border,

It is important to note, however, that the inline element is not able to set the padding value and the margin value in the vertical direction without altering its performance behavior.

　　

Margin (margin)

The margin describes the distance between the box and the box, that is, how far away the box can be to place another box. A classic problem exists in the margin settings: vertical margin merges, often appearing between parent elements and sibling elements in the vertical direction, or when the top margin is set for an element, but there is no distance between the child element and the parent element, as expected, or between the parent element and its sibling elements. But we didn't set the margin for the parent Element. The methods for resolving margin merges are:

1. Float (float)

2. Positioning (position:absolute)

3, fill (padding), to the parent element in the vertical direction of the fill, to separate the parent element and child elements of the margin;

4, the frame (border), the principle of ibid;

5, overflow:hidden;

Among them, the role of Overflow:hidden is not only to solve the vertical margin merger, It also has the effect of clearing floating;

　　

Padding (padding)

Padding refers to the inside of the box, within a distance of four weeks from the box can be placed in the box, but the inside of the box can be changed by changing its margin (margin) to modify the distance around the parent element box, ignoring the parent element padding Settings. The Overflow:hidden element is set to hide inside its fill area, but beyond the Margin.

Contents (content)

The width and height set in the CSS is the width of the content area, but there is an attribute to set the Box's composition:

Box-sizing:border-box|content-box|inherit

Where Border-box represents the width and Height properties set in CSS include the border and padding;

Content-box indicates that the width and Height properties set in the CSS are only the widths and heights of the content area;

Inherit is inherited from the parent Element.

<div class= "wrapper" >

<div class= "border-box" style= "width:200px;box-sizing:border-box;" ></div>//the Total page size is 200px

</div>

<div class= "wrapper" >

<div class= "content-box" style= "width:200px;box-sizing:content-box;" ></div>//the size of the entire page is calculated as

Horizontal direction:: width+2*padding+2*border+2*border,

Vertical direction:: height+2*padding+2*border+2*border,

</div>

<div class= "wrapper" style= "width:200px;" >

<div class= "inherit" style= "box-sizing:inherit;" ></div>//inherit parent Element

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

</div>

CSS box model, vertical margin Merge