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
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