CSS: Margin-top when parent's got no border

Posted by Manny on Stack Overflow See other posts from Stack Overflow or by Manny
Published on 2009-09-08T15:40:16Z Indexed on 2010/05/10 1:08 UTC
Read the original article Hit count: 385

Filed under:
|
|
|

Hi,

As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?

html:

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

css:

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

Thanks

© Stack Overflow or respective owner

Related posts about css

Related posts about border