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
- <CODE>
- <html>
- <head>
- <style type="text/css">
- p
- {
- color:blue;
- text-align:center;
- }
- .marked
- {
- background-color:red;
- }
- .marked p
- {
- color:white;
- margin: 50px;
- }
- </style>
- </head>
- <body>
- <p>This is a blue, center-aligned paragraph.</p>
- <div class="marked">
- <p>This p element should not be blue.</p>
- </div>
- <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
- </body>
- </html>
- </CODE>
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?