By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,674 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

margin as a part of box model of the element without any sibling element

P: 64
hi

we define margin as a part of box model of the element but what happen when i define margin for an element that don't have any sibling, are margins of that element affected?

for example see the below example:
Expand|Select|Wrap|Line Numbers
  1. <CODE>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. p
  6. {
  7. color:blue;
  8. text-align:center;
  9. }
  10. .marked
  11. {
  12. background-color:red;
  13. }
  14. .marked p
  15. {
  16. color:white;
  17. margin: 50px;
  18. }
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <p>This is a blue, center-aligned paragraph.</p>
  24. <div class="marked">
  25. <p>This p element should not be blue.</p>
  26. </div>
  27. <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
  28. </body>
  29. </html>
  30. </CODE>
you can see above example at http://www.w3schools.com/css/tryit.a...trycss_nesting,
i added margin: 10px; declaration to .marked p selector only.

In above example we have a p element that is matched with .marked p selector and this element doesn't have any sibling , I define margin: 50px for that but this margin is not affected because background-color of div element with marked class is spread under the p element without any margin for that, is that for the sake of no sibling exist?
Jun 11 '11 #1
Share this Question
Share on Google+
2 Replies


JKing
Expert 100+
P: 1,206
Whats happening here is called "collapsing margins". If the div of class "marked" were to have padding or a border the margins of .marked p would be applied within the div. However due to collapsing margins the div and the paragraph share the margin.

Collapsing Margins
Jun 13 '11 #2

P: 64
okay , when two margin areas place beside without any separator space , they are collapsed into one space toward larger margin area.
Jun 13 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.