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

Asked

Viewed 14,426 times

14

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 unit of that 0? px? %?

html css

4 answers

20


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 from the top. Understand that when a side is not defined, it will use the same 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 that the browser will give a 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 is the default for a div, by putting margin: 0 auto;, means that you will give automatic margins on the left and right to center the block horizontally on the screen.

margin: 0;

The 0 margin means you don’t want any margin.

To clarify why "0" does not require units: independent of the unit, because in any unit 0 = 0. It could be 0px, 0rem, 0em, 0% and it would all be the same because they all have zero 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 construction or other page values and may have very different results. In conclusion, a 0 will probably never need a unit as its value will be null.

  • Whoever it was that negatived it. Any specific reason?

  • Excellent, exactly the answer I would put. Only perhaps would I change one detail by simplification: when only two values are defined, it is said that the first will be vertical spacing and the second horizontal spacing. In terms of terms it is a little more concise than saying "top and bottom" and "left and right" (in this specific case). Overall, that’s exactly it.

  • @Thanks Andersoncarloswoss. Really could have been more concise in that detail. So I kind of said this before, but I’m going to adapt it for simplification.

  • This 0 is pixel?

  • 1

    @Lucascarvalho It’s like I explained in bold at the end of my answer. It’s nothing because it doesn’t have to be anything.

  • Got it, thanks Leon!

  • @Lucascarvalho I worked out my ending better, if you still have doubts, take a look there.

  • Negative for some specific reason?

Show 3 more comments

8

When you put:

margin: 0 auto;

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

When you say:

margin: auto;

You are adding to the margin element auto everywhere. (left,top, right, bottom)

5

margin: 0 auto;

Defines the margins esquerda and direita of the element and the margins auto above and below 0.

margin: auto;

Sets all margins to auto.

-2

margin: auto; This means that all margins of the element will be calculated automatically margin: 0 auto; That means the upper and lower margins will be 0px and the left and right margins will be automatic

AUTOMATICS: meaning that the interpreted will make a calculation based on the width or height of the element so that both margins have the same size

this is quite used to center elements, but for this it is important that you set a width (if you want it to have equal margins on both sides) for the div or the element you want to center on the screen.

  • 1

    Nothing different from the 2017 response...

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.