473,385 Members | 1,983 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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

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
2 1575
JKing
1,206 Expert 1GB
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
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

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

Similar topics

3
by: Y.S. | last post by:
Hello All, I have the following schema: .... <xs:element name="data_type_id" type="xs:unsignedShort" /> <xs:element name="data_value" type="xs:anyType" /> .... What I want to do is to...
2
by: Michael K?nig | last post by:
Hello, I've an XML-file structured like this <table> <tr> <td>Nombre:</td> <td>Joseph</td> <td>Apellido:</td> <td>Ratzinger</td>
3
by: NWhite | last post by:
Hi all, I'm trying to indent <li> items using: li { margin: 0 0 0 50px;} So I expect something like the following to indent 50 pixels from the left margin:
1
by: Stanimir Stamenkov | last post by:
I've wondered if it is right thing to do: element.parentNode.insertBefore(element, beforeElement); where 'beforeElement' is one of the 'element.parentNode.childNodes'? First, I've used: ...
6
by: ste.paoletti | last post by:
hi, I have read that browsers support block element inside inline element but the css is not valid. Someone can tell me more about? What do you think? Thanks.
5
by: felipevaldez | last post by:
how can I put an element below another element, that's not absolutely positioned? so I have a n element, called X, and next to that, an element Y X Y XXXXXX
2
by: emma_middlebrook | last post by:
Hi <ClubNight Name = "Go club" Date = "2006-09-09"> Discussed a few simple proverbs. <Attendee Name = "RJ"/> <Attendee Name = "TT"/> <Attendee Name = "RB"/> </ClubNight> I'm trying to work...
4
by: mikewse | last post by:
I have a really strange layout bug in a web page, that only appears in IE. An INPUT element inside a DIV is getting an extra left margin, the same as the parent DIV has been given. It is as if the...
1
by: jerico | last post by:
Hi, I am a beginner in xml.I am puzzled about the difference between global element and root element.Any explanation would be greatly appreciated. Jerico
2
by: getteddy | last post by:
hi i am working on array , i am facing a problem in comparing data base element with array element if not (objrs("namephase")=("despArray(ctr,0)+despArray(ctr,3)")) then or If...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.