Where should my element be when all margins are 15px? - html

Question

I have a <div> element and I have added 15px margins for the border.
Please have a look at the html & css codes.
HTML
<div id="test">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, mazim nemore postulant qui ut,</p>
</div>
CSS
#test{
width:800px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;**
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
So according to my css stylesheet margins are set to 15px. (I could have used shorthand notation margin:15px). When this is run in the browser only top and left margins are set to 15px and obviously there are more than 15px margins from bottom and right. Why does this happen even when we have defined margins for right and bottom?
Is not it necessary to define margins for all the sides?

Answer 1

By default, your div sits at the top left of the viewport—or 15px from it, because of the margin on the top and on the left.
If you had another div to the right of this div and one below it, you'd see that the margin was 15px on all sides. At the moment, there is open space to the right and underneath the div, so the margin means nothing. It's like putting a margin on the Earth: it won't push it any further away from outer space. :-)

Answer 2

I'm not too sure what you are trying to achieve. But, here are a few questions? If the div is displaying block why do you need to set the width and right margin at the same time? What are these ** for? Basically if you remove those ** and the width you should be fine. Here's the resulting css...
#test{
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
And here is a JS Fiddler which is hopefully what you are trying to achieve

Answer 3

Your element is exactly where it should be when all margins are set like that. You might just be mixing up the terminology a bit, let me clarify.
(I apologize for the casual English, but I find this helps explain complex concepts better.)
Margins do not resize the element to fit the area around them. Nor do they resize the window. Rather, they let elements keep their default height/width and place a buffer around them, telling other elements "you can come this close but no closer!" Even the window obeys... it puts 15px distance between the top-left walls and the element. The other two sides (the bottom and right side) are clearly further away though, so this margin does not affect them at all.
If your goal is to have the element stretch out to fill the window, with a 15px buffer on all sides, then this CSS uses the method you need:
#test{
position: absolute;
left: 15px;
top: 15px;
right: 15px;
bottom: 15px;
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
If you want the window itself to size down to the element's size (plus the 15px buffer), you will need some Javascript coding instead, as CSS does not currently have that capability. Numerous tutorials exist on the internet if that's what you need.

Answer 4

From what I can tell, your element is exactly where it should be with margin:15px; all around. The "extra" space you are seeing is the rest of the body filling the browser window. I threw together a JS Fiddle using a second copy of your div and colors so you can see exactly what is going on.
The first <div> and the second both have 15px margins all the way around. This results in a 30px gap between them. If we were to define them both as display:inline-block; you would see a similar 30px gap between them horizontally.
Remember, the CSS box model uses margins to define the area directly outside the border of your element.