Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Margin question

A

andyjamesnelson

macrumors 6502
Original poster
Aug 24, 2003
286
0
Jacob's house
Hey I am having a problem with understanding a certain aspect of margin within css.

Heres the problem I don't understand:

<style type="text/css">

*{margin:0; padding:0;}

#header {height:100px; background-color:#CCCCCC;}

#header p {margin:10px 0 0 10px;}
</style>
</head>

<body>
<div id="header">
<p>Hello</p>
</div>

What I don't understand is why does applying a margin-top to the <p> making the containing div id="header" jump down 10px on screen but not left 10px - in this case just the text moves.

Why doesn't the text just move with margin-top:10px?

I'm not moving the containing div. I'm telling it to move the <p> no?

I really don't get this.

Thanks, Andy

</body>
</html>
 
Yeah, it can be a little confusing. Remember though, that a div is just a container. If you wanted to move the p without moving the div you would either using padding (on the div) instead of a margin (on the p), or you could have the p positioned relative (on the p) and use top to move it down. There's space on the left of the p because the div automatically takes up full width.
 
But If I do this:

<style type="text/css">

*{margin:0; padding:0;}


#header {height:100px; background-color:#CCCCCC; width:100px;}

#header p {margin-left:10px;}




</style>


</head>

<div id="header">
<p>Hello</p>


</div>

<body>
</body>
</html>

Then the only the <p> moves and does what one would imagine has a border-left of 10px from the edge of the div.

? Andy
 
Like I said, a div fill the whole width no matter what's inside of it. The left spacing has nothing to do with the CSS applied to the p.
 
Hey,

Wow now I am really confused :p

You did notice I gave the div a width in the last example?

How do you mean the space has nothing to do with the css? Isn't directly to do with the margin-left:10px because that space wouldn't be there without it?

Andy.
 
andyjamesnelson said:
You did notice I gave the div a width in the last example?

How do you mean the space has nothing to do with the css? Isn't directly to do with the margin-left:10px because that space wouldn't be there without it?
Click to expand...

I did miss that width, but doesn't really change things.

I said the left space has nothing to do with he p's CSS from the div's perspective, meaning that the div will have the same width no matter what CSS is applied to the p. That's what I meant. Though it was not clear. I won't say this is an easy concept to completely grasp, and obviously hard to explain as well.
 
Ok I get that.

What I dont get is why the div moves down 10px when I use margin-top:10px on the <p> and why it doesn't move left when I use margin-left:10px on the <p> if the div has a discreet width.

The I understood things is that margin was the space around on objects border.

So apply a margin to a <p> within a div I am affecting the space around the <p> in the div and not affecting the positioning of the div in anyway.

However like I said margin-top:10px on the <p> within the div makes the div drop down 10px and not the <p> inside it?

Andy
 
See if the linked article below helps clear things up for you. I'm talking myself into circles so I'll stop explaining it myself.

http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
Let's make a simple box and see how it works. Boxes are created by "block level" elements like <table>, <p>, <blockquote>, <ul>, <li>, and the generic <div>, among others. Some layout editors, such as Dreamweaver, use <div>s to create absolutely positioned "layers." However, <div>s are actually simple generic container boxes without default properties of any kind. If they are not positioned they are "static", meaning they are placed within the normal flow of the document as it is laid out, just as <p>s and other block level elements are.

Each "block level" element is displayed on a line by itself, so to speak, and will force any element coming after it to begin on a new line. By default, a box is as wide as it can be without spilling out of its containing element, in this case the <body> element.
Click to expand...
 
Hey,

I believe I do understand the box model and I also read the article.

I still do not understand why the div drops down just when I use margin-top:10px on the <p> within the div.

I know I could use padding-top:10px on the <p> and only the <p> would move and the div would remain in the same place.

In general then one should use padding to position text etc within divs?

Also whilst I am hear you know how easy it is to center a page using margin:0 auto... is there a way to center the page top / down in the same way?

Andy.
 
Vertical alignment can be done on inline items (spans, links, etc.). This article might help a little bit. It's more or less a tutorial on the display: inline-block property, but it has some helpful information. There's plenty of info on centering, and several methods, all of which have positive and negative sides to using them. Unfortunately I can't find a better link right now, but more useful information exists.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back