What is auto do in margin:0 auto;?
I cant seem to exactly understand what auto does. I know it sometimes has an effect of centering objects. That's about it. Thanks.
views:
73answers:
3
+4
A:
When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.
Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which is does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first paramter 0 indicates that the top and bottom margins will both be set to 0.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
Therefor, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;
Which would give:
margin-left:25;
margin-right:25;
Have a look at this jsFiddle. You'll you do not have to specify the parent width, only the width of the child object.
GenericTypeTea
2010-07-03 08:05:27
but we never define any width to `body` and we always give `width` and `margin:0 auto` to `#wrapper`
metal-gear-solid
2010-07-03 08:08:07
ok then margin between body and object will be calculated by browser automatically.
metal-gear-solid
2010-07-03 08:15:34
Is there any similar value in `%`? I mean is there any other property in css which can give same result like left and right `auto`
metal-gear-solid
2010-07-03 08:16:43
It'll work for percentages as well.
GenericTypeTea
2010-07-03 08:23:48
@GenericTypeTea - and what happens in `margin:auto 0` condition?
metal-gear-solid
2010-07-03 10:51:08
What do you mean?
GenericTypeTea
2010-07-03 18:10:14
+3
A:
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
shinod
2010-07-03 08:09:19
+1
A:
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.
Gumbo
2010-07-03 08:10:35
@metal-gear-solid - If the parent's width (determine by the browser or by the specified width) is 100px and your child div's width is 50px. Then margin:0 auto will determine that there's 50px of available space. It will then divide that by 2, giving 25. The left and right margin are then both set to 25, i.e. the values are set equally.
GenericTypeTea
2010-07-03 08:17:02
The used values refer to the actually used values depending on the actual visual properties of the element that use this property and its containing block. The linked section has a formula that is used to calculate the horizontal difference between an element and its containing block. That difference is then spitted equally and used as the actual horizontal margin values.
Gumbo
2010-07-03 08:18:18