What is the difference between this 2 margins?

Question

I'm doing a homework for university is to make a website. So i have a div id named container that is my div that will define the width for all my page. So my question is the teacher said to put

#container {
    width:Anyvaluepx;
     margin:auto;

}

So i was looking for ways to center a container and i saw people saying to put something like that:

#container {
  width:valuepx;
   margin 0 auto;

}

I think is not necessary my html file but i will post too:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eagle's Guitar Shop</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id="footer">
 </div>






</div> <!--Finish Container div-->
</body>
</html>

So my question is simple what is the difference between use margin:auto; and margin: 0 auto;?

Thanks for all the question so the margin works for re-size the website with the screen resolution right? so it is better to let all auto? or 0 auto;?

Thank you for your time.

score 2 · Answer 1 · edited May 23 '17 at 11:49

2

Both will put your div horizontally in center. Adding 0 ensure top and bottom margins will be zero. It doesn't have to do anything with aligning center. For more infi reffer to the following post.

What does auto do in margin:0 auto?

edited May 23 '17 at 11:49

Community

1
1

answered Dec 02 '13 at 01:25

rajender sohi

324
1
2
13

score 0 · Answer 2 · answered Dec 02 '13 at 01:18

0

The difference is that margin: auto; sets all margins to auto; whereas margin: 0 auto sets the margin-top and margin-bottom both to 0 and margin-left and margin-right both to auto.

margin: auto;

is equivalent to:

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

Whereas

margin: 0 auto;

is equivalent to:

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

Similarly,

margin: 0 auto 10px;

would be equivalent to:

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

References:

CSS Properties: margin.

answered Dec 02 '13 at 01:18

David Thomas

249,100
51
377
410

hm so my teacher is wrong? So the correct way is use always margin:0 auto;? Thank you. – Fredericofrg Dec 02 '13 at 01:19
1

No, top and bottom margins **can** be `auto`, they will simply deafult to zero for a box which is not absolutely positioned. – Carlo Cannas Dec 02 '13 at 01:22
@Carlo: agreed, just deleted that assertion (after a moment's thought). – David Thomas Dec 02 '13 at 01:23

score 0 · Answer 3 · answered Dec 02 '13 at 01:23

0

margin: 0 auto is the proper way to center a container. The difference is margin: auto messes with vertical and horizontal axis where as the latter focuses on the horizontal.

answered Dec 02 '13 at 01:23

beautifulcoder

10,832
3
19
29

What is the difference between this 2 margins?

3 Answers3