473,748 Members | 2,611 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

64 New Member
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 1595
JKing
1,206 Recognized Expert Top Contributor
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
sedigh mohseni
64 New Member
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
2104
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 specify that "If 'data_value' element exists, 'data_type_id' element MUST exist".
2
5887
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
3131
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
1406
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: var parentElement = element.parentNode; parentElement.removeChild(element);
6
787
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
3993
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
1518
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 out if I can actually define this as a complex type
4
2886
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 old "double margin on floats" was kicking in, but there are no floats in this layout! And it only affects the INPUT, not text or a SELECT within the same DIV... I would really need some pointers on how to attack this. Thanks / Mike <!DOCTYPE...
1
4100
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
1543
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 (StrComp(objRS("UserName")),("despArray(ctr,0)+despArray(ctr,3)")) , vbTextCompare) = 0) Then please help me
0
8995
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9561
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9381
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9332
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6799
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4608
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4879
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3316
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2791
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.