本文介绍了CSS:当父母没有边框时,Margin-top的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 您可以在这张图片中看到,我有一个橙色 div 在没有顶部边框的绿色 div 内。橙色 div 有一个 30px 顶部边距,但它也推动绿色 code> down。当然,添加顶部边框将解决这个问题,但我需要绿色 div 是顶部无边框。我可以做什么? .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>顶部< / div>< div class =body> < div class =container> Box< / div>< / div>< div class =foot> Bottom< / div> 感谢解决方案添加 overflow:auto 到 .body 以防止边缘崩溃。请参见 http://www.w3.org/TR/CSS2/box .html#collapsing-margins 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 解决方案 You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins 这篇关于CSS:当父母没有边框时,Margin-top的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
09-05 20:51
查看更多