CSS margin margin properties and usage summary

An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element. The simplest way to set the margin is to use the margin property, which accepts any length units, which can be pixels, inches, millimeters, or em, percent values, or even negatives. In this paper, we will discuss the properties and use of margin, the overlap and superposition of margins, and the effect of margin as negative value.

I. Introduction to the margin properties of CSS

1. Use the margin property of the CSS

The default value for margin is 0, so if you do not declare a value for margin, there is no margin. However, in practice, the browser has provided a predetermined style for many elements, and margins are no exception. For example, in a browser that supports CSS, margins generate a "blank line" above and below each paragraph element. Therefore, if the margin is not declared for the P element, the browser may apply an outer margin on its own. Of course, the default style will be overridden as long as you specifically make a declaration.

2. Details of the use of margins margin in CSS

Retrieves or sets the epitaxial margins of the four edges of an object. If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges. If only one is provided, it will be used for all four sides. If two is provided, the first one is for top, bottom, and second for left and right. If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next. Non-substituted (non-replaced) inline elements can use this property to set the outer patches on the left and right sides; To set up an outer patch on the upper and lower sides, you must first make the object appear as a block-level or inline block-level. The extended margins are always transparent.

3. CSS important properties of the margin attribute knowledge of the big set introduction

1) Simple Introduction to margin properties

2) margin does not apply to elements

3) margin folding (collapsing margins)

4) Collapsing margins solution

Second, margin overlap or overlay problem

1. Introduction to the solution of margin overlay problem in CSS (graphic)

Boundary overlay is a fairly simple concept. However, when you lay out a Web page in practice, it creates a lot of confusion. Simply put, when two vertical boundaries meet, they form a boundary. The height of this boundary is equal to the larger of the two height of the bounding boundary where the overlay occurs.

2. CSS margin overlap and prevention methods

Boundary overlap refers to two or more boxes (which may or may be nested) adjacent boundaries (in which there is no non-empty content, padding, borders) coincident together to form a single boundary.

The vertical adjacent boundary of two or more block-level boxes is coincident. The boundary width of the result is the largest value in the width of the adjacent boundary. If there is a negative boundary, the maximum negative boundary of the absolute value is subtracted from the largest positive boundary. If there is no positive boundary, the maximum negative boundary of the absolute value is subtracted from zero. Note: Adjacent boxes may not be generated by the elements of a parent-child or sibling relationship.

Third, the effect of margin is negative

1. Simply talk about the effect of negative margin

We use the margin in CSS, but the margin is set to negative, that may not be good to handle, margin negative value is not hack,margin negative values follow the flow of the document, if the use of margin negative to force an element upward displacement, then the relevant elements will also occur with the displacement , margin negative can be well compatible with each browser.

2. Use negative margin values in CSS to adjust center position

This is perhaps the most commonly used centering method. If you know the size of each element, set a negative margin value equal to half the width of the height (if you do not use the Box-sizing:border-box style, you also need to add a padding value), and then with top:50%; left:50%, the style causes the block element to be centered.

Related questions and answers about Cssmargin

1. Front-margin problem, that elder brother help me explain

2. Front-end-CSS three columns and other high layout questions margin negative compensation

3. Css-margin Negative Why do you design this?

"Recommended"

1. CSS Center: The most comprehensive CSS centering method Daquan

2. DIV Center: The most complete P-Center method summary

3. CSS Image Center: CSS image centered around the top (horizontal and vertical center)