What is the difference between "margin: 0 auto;" and "margin: auto;"?

11

As the title already says: What exactly is the difference between margin: 0 auto; and margin: auto; ?

margin: 0 auto;
margin: auto;

Why can you only use 0? What would be the unity of this 0? px %?

    
asked by anonymous 22.05.2017 / 16:53

3 answers

15

First of all, you need to understand how to write a margin. There are 4 ways to write the margin, understanding that it works in clockwise starting at the top. Understand that when one side is not defined, it will use the same one defined for its opposite.

Example:

margin: /* top right bottom left */
margin: 0; /* margem de todos os lados = 0 */
margin: 0 1px; /* top/bottom = 0; right/left = 1px */
margin: 0 1px 2px; /* top = 0; right/left = 1px; bottom = 2px */
margin: 0 1px 2px 3px; /* top = 0; right= 1px; bottom = 2px; left = 3px */

margin: auto;

It means the browser will give automatic margin for all sides . The automatic margin will not work at all times because it needs a logic to work.

For example, in an element that has display: block as the default of a div, putting margin: 0 auto; means that you will have automatic margins left and right to center the block horizontally on the screen.

margin: 0;

The margin 0 means you do not want any margin.

To clarify why the "0" does not require drives: independent the drive, because on any drive 0 = 0 . It could be 0px, 0rem, 0em, 0% and would give everything in the same because all of them have null value. It is different from, for example: 1px, 1rem, 1em, 1%; these results would all have different values because only 1px is a static value. The other three values depend on the build or other values on the page and can have very different results. In conclusion, a 0 will probably never need a drive because its value will be null.

    
22.05.2017 / 17:38
8

When you put:

margin: 0 auto;

You are setting%% of element margins to esquerda e direita and upper and lower margins to auto .

When it says:

margin: auto;

You are adding to the% alias% element on all sides. 0

    
22.05.2017 / 17:01
5
margin: 0 auto;

Defines the esquerda and direita margins of the element and the margins auto greater than and less than 0 .

margin: auto;

Set all margins to auto .

    
22.05.2017 / 17:01