'What does auto do in margin: 0 auto?

What does auto do in margin: 0 auto;?

I can't seem to understand what auto does. I know it sometimes has the effect of centring objects.

cssmargin


Solution 1:[1]

auto: The browser sets the margin. The result of this is dependant of the browser

margin:0 auto specifies

* top and bottom margins are 0
* right and left margins are auto

Solution 2:[2]

From the CSS specification on Calculating widths and margins for Block-level, non-replaced elements in normal flow:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

Solution 3:[3]

margin:0 auto;

0 is for top-bottom and auto for left-right. It means that left and right margin will take auto margin according to the width of the element and the width of the container.

Generally if you want to put any element at center position then margin:auto works perfectly. But it only works in block elements.

Solution 4:[4]

It becomes clearer with some explanation of how the two values work.

The margin property is shorthand for:

margin-top
margin-right
margin-bottom
margin-left

So how come only two values?

Well, you can express margin with four values like this:

margin: 10px, 20px, 15px, 5px;

which would mean 10px top, 20px right, 15px bottom, 5px left

Likewise you can also express with two values like this:

margin: 20px 10px;

This would give you a margin 20px top and bottom and 10px left and right.

And if you set:

margin: 20px auto;

Then that means top and bottom margin of 20px and left and right margin of auto. And auto means that the left/right margin are automatically set based on the container. If your element is a block type element, meaning it is a box and takes up the entire width of the view, then auto sets the left and right margin the same and hence the element is centered.

Solution 5:[5]

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 is for top-bottom and auto for left-right. The browser sets the margin.

Solution 6:[6]

The auto in

margin: 0 auto;

tells the browser to set the margin-left and margin-right properties of the element automatically which the browser accomplishes by giving both margins the same value.

Some important things to note are:

  1. It can only be used for block-level elements having specified width:

    a. If the width is not specified, the left and right margins would be set to 0 as block-level elements take up the entire width of the container. enter image description here

    b. For inline or inline-block elements, there is no horizontal space available to set the margin as there are other inline elements present before and after. enter image description here

  2. auto is useful only for horizontal centering, so using margin: auto 0; will NOT center an element vertically. source

.card {
  width: 400px;
  height: 100px;
  background-color: yellow;
}

.box {
  width: 30px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
  /* margin: auto 0; */
  /* display: inline-block; */
}
<div class="card">
  <div class="box">Box</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 shin
Solution 2 Gumbo
Solution 3 Riccardo Zorn
Solution 4 Angus Comber
Solution 5 jaffer sathick
Solution 6

Related Questions