Menu
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?
.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; }<div class="header">Top</div> <div class="body"> <div class="container">Box</div> </div> <div class="foot">Bottom</div>Thanks
426
How to Avoid Margin Collapse. First, remember that margins should preferably be used to increase the distance between sibling elements, not to create spacing between a child and a parent. If you need to increase space within the Flow layout, reach first for padding if possible.
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
