人亦已歌 发表于 2023-2-1 11:49:27

CSS核心(三十二)解决两个兄弟div下外边距和上外边距冲突的BUG

该BUG的描述是:
当两个div是兄弟关系时,如果给上一个div设置了下外边距,又给下一个div设置了上外边距,按照正常逻辑,此时两个div之间的距离应该是上面div的下外边距+下面div的上外边距,然而,实际情况是:这两个外边距谁大,那么它们之间的距离就是谁。

如果不能理解以上描述,我们就看代码:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>解决两个兄弟div下外边距和上外边距冲突的BUG</title>
</head>
<style>
        .xiong{
                width:300px;
                height:100px;
                background:#f00;
                margin-bottom:100px;       
        }
        .di{
                width:200px;
                height:200px;
                background:#0f0;
                margin-top:250px;       
        }
</style>
<body>

<div class="xiong"></div>
<div class="di"></div>
</body>
</html>





所以如何解决呢?

给上面的div设置下边距或给下面的div设置上边距,不要同时设置这两个边距。

胡缺生 发表于 2023-2-18 00:17:34

只要是发现了自己的问题 那就是好样的

海龙女 发表于 2023-2-24 12:23:34

让我深有感触,感觉自已差太多太多了   

lt5208 发表于 2023-2-28 15:53:59

说得很精彩!~~~~~~~~~

sixigonzi 发表于 2023-3-6 12:31:46

^精华啊,虚心学习

anz130 发表于 2023-3-12 06:28:58

verygood,我也想成为一名高手,希望各位指教指教,嘻嘻。

无间漂流者 发表于 2023-3-18 00:28:00

真的值得大家向你学习,不过学海无涯,还得加油学习!

loyalknight 发表于 2023-3-22 17:07:51

是啊,重知识轻技术的后果

terror19840506 发表于 2023-3-27 20:00:05

没什么我只是一个大专生相信让我出题的话同样范畴的题我也可以不他考住没有两个人的思维是一样的很简单的道理他的想法不可能和我的想法一样

美丽在线 发表于 2023-3-30 16:36:52

很好很棒!我虽然是一名初学者,但是看了这篇文章后,对我有了很大的触动,在今后的学习之路上可能会遇到各种各样的难题,但我会坚守一条,坚持就是胜利!世上没有解不开的结,没有过不去的坎!努力!
页: [1] 2 3 4
查看完整版本: CSS核心(三十二)解决两个兄弟div下外边距和上外边距冲突的BUG