Examples of cssmargin margin

Cssmargin is used to set the distance between object labels. For example, if you want to set a certain gap between two div labels, we can use the cssmargin attribute. This article introduces the usage and examples of cssmargin margin to coders. For more information, see. Margin is used to set the distance between object labels. For example, if there are two upper and lower DIV boxes, we can use the margin style to implement the spacing between the upper and lower boxes. The Margin rendering is located on the outer side of the object border, closely following the border. The position of marign and padding is opposite to that of css padding, but the border is located on the inside of the border.

I. Basic syntax and structure of margin

The margin refers to the CSS word margin, which is the extension margin of the four sides of the object, no background color or color.

1. margin syntax

Margin:10px

The value of Margin is a number + html unit, and can also be auto (automatic and adaptive)

2. Application Structure

Div{margin:10px}

Set the four-side spacing of the p object to 10px.

3. Margin description

Margin is used to set the outer Yanbian distance of the object.

The value of margin can be a positive integer or a negative integer, and the Unit is pixel (margin-left: 20px). It can be auto attribute (margin-left: auto ); it can be a percentage (%) value (margin-left: 3% ).

Margin extension (set the four-side spacing attribute word separately)
The left extension margin of the margin-left object (margin-left: 5px; the left extension distance is 5 px)
The right margin of the margin-right Object (margin-right: 5px; the right margin is 5 px)
The top extension margin of the margin-top object (margin-top: 5px; the top extension distance is 5 px)
Bottom extension margin of the margin-bottom object (margin-bottom: 5px; bottom extension distance: 5px)

Ii. Abbreviation of css margin

Css margin attributes, such as Upper/lower, left/right, and upper/lower, can be abbreviated as "optimized.

1. Only the abbreviations of upper and lower cases are supported.
Original: margin-top: 5px; margin-bottom: 6px
Abbreviation: margin: 5px 0 6px 0 or margin: 5px auto 6px auto

2. Only the abbreviations of left and right scenes
Original: margin-left: 5px; margin-right: 6px
Abbreviation: margin: 0 6px 0 5px or margin: auto 6px auto 5px

3. Abbreviation of only three sides
Original: margin-top: 5px; margin-bottom: 6px; margin-left: 4px
Abbreviation: margin: 5px 0 6px 4px or margin: 5px auto 6px 4px

4. Abbreviations with the same four sides
Original: margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px
Abbreviation: margin: 5px;

5. Abbreviations of different values on four sides
Original: margin-top: 5px; margin-bottom: 6px; margin-left: 7px; margin-right: 8px
Abbreviation: margin: 5px 8px 6px 7px;

6. The upper and lower values and the left and right values on each side are abbreviated

Original: margin-top: 5px; margin-bottom: 5px; margin-left: 7px; margin-right: 7px
Abbreviation: margin: 5px 7px;

3. Common margin styles

1. Use margin to set the object box spacing

We usually use margin to set the distance between two boxes. Regardless of the distance between the upper and lower sides, we can use margin to implement the interval.

2. Use margin to center the layout. Basic Words:

marign:0 auto;

You can center the object, but you need a condition that the upper-level of the object must set the text-align: center content center attribute style. Some browsers do not set the text-align: center content center style for the body label, and their lower-level include objects with margin: 0 auto will also center their layout, however, to be compatible with various browsers, we recommend that you set a text-align: center attribute style for the body.

Iv. css margin case

The text top margin is set to the centimeter value.

This example shows how to set the top margin of a text with a centimeter value.

A paragraph with no margins specified.
A paragraph with a 2cm top margin.
A paragraph with no margins specified.

Online operation

V. Summary of css margin

The Margin style is used to set the spacing between an object and an object. We can use the margin-left, margin-right, margin-top, and margin-bottom style attributes to separately set the spacing between one side, margin is used to set the spacing between objects in the box. Generally, pay attention to the abbreviated Optimization of margin. After learning more about the functions of margin, you can quickly get started with margin.

Disadvantages of margin: css hack is easily caused when CSS margin is used. IE6 explains that this attribute may lead to double distance. You may need to know about CSS compatible browsers.

Related reading:

CSS tutorial

CSS3 tutorial

CSS Reference Manual