homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Can someone tell me this, about margin thing.
wll6568

10+ Year Member



 
Msg#: 3158287 posted 8:49 am on Nov 16, 2006 (gmt 0)

When I have two divs, like:

#something{
margin-left: 10px;
}

#content{
margin-left:10px;
}

<div id="something">
<div id="content">Yes, it's here</div>
</div>

Would that add 20px to the text in content?

 

yuval_raz

5+ Year Member



 
Msg#: 3158287 posted 9:36 am on Nov 16, 2006 (gmt 0)

umm... no, it will give the #content a 10px margin to the left.
the text within the element will stay adjacent to the "border" of that element.

hope this helps,

yuval

choster

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3158287 posted 5:28 pm on Nov 16, 2006 (gmt 0)

You can see exactly the behavior this will produce by adding some background colors, e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>margin test</title>
<style type="text/css">
html, body {background:#fff; margin:0; padding:0;}
#something {margin-left: 10px; background:#f00;}
#content {margin-left:10px; background:#00f;}
</style>
</head>

<body>
<div id="something">
<div id="content">Yes, it's here</div>
</div>
</body>
</html>

I used a strict doctype but it will display the same in quirks, even back to NS4.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3158287 posted 7:10 pm on Nov 16, 2006 (gmt 0)

Margins will collapse. You can prevent them from collapsing by adding either a border or padding to the item who's margin is collapsed (your outter item).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved