How to use margin 0 auto in HTML

Margin is a very important attribute, so how to use margin 0 auto in HTML? Today we will introduce margin:0 auto. Here is a small example

margin setting objectOuter margin, if we set a border line (border) for DIV After setting the style, you can see in the DW software that the margin setting value is actually the distance outside the border. This style sets the style of the spacing between objects (DIV).

margin:0 auto function syntax

1. Margin:0 auto introduction

margin:0 auto sets the upper and lower spacing of the object to 0, and the left and right spacing is automatic.

Can be split: margin: 0 auto 0 auto (up and down)

can also be split into: margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;

2. Function

Set margin:0 for DIV The auto style is to center the DIV horizontally in the browser. For layout centering and horizontal centering, just add margin:0 auto.

Joint point: auto (automatic, adaptive)

If we set the width of a DIV to 500px, and then set the margin:0 auto style, if the width of your browser window is 1000px wide, At this time, the spacing between the left and right sides of the DIV is (auto). At this time, the browser will automatically recognize the 250px width spacing between the left and right sides of the DIV. At this time, the DIV box will naturally be horizontally centered in the browser.

Why set margin:0 auto?

Set this style to center the DIV layout horizontally in the browser. The purpose is to be compatible with major browsers and center the layout. If you do not add the margin:0 auto CSS style, the layout will be centered in some browsers and to the left in others.

Forbidden: If you want the DIV layout to be centered in the browser, add margin: 0. Auto cannot add the floatfloat style to avoid logic errors and cause layout centering incompatibility.

I believe that through our introduction, you have mastered the attribute of margin 0 auto. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to set the background image of a web page in HTML

How to set the cursor attribute of css

How to use border-radius in CSS

The above is the detailed content of How to use margin 0 auto in HTML. For more information, please follow other related articles on the PHP Chinese website!