网页布局marginbottom如何设置？几个例子教你！

今儿个，咱来聊聊CSS里的margin-bottom，这玩意儿，说白就是给元素屁股底下垫东西，让它跟下面的元素之间空出点儿距离。

我以为这东西特简单，不就是设置个数字嘛像素、百分比啥的，随便填。结果，一上手就发现，事情没那么简单。

我先是建个HTML文件，里面放几个<div>，每个<div>里都写点字。然后，我想让每个<div>之间都隔开点距离，就在CSS里给它们加margin-bottom。

<style>
div {
margin-bottom: 20px;


</style>

这下有意思！

我发现，有时候这margin-bottom还挺听话，我说多少就是多少。可有时候，它就跟“抽风”似的，俩<div>之间的距离，压根就不是我设置的那个数。

• 比如我给上面的<div>设置margin-bottom:20px，给下面的<div>设置margin-top:30px。
• 按理说，它俩之间应该隔50px才对。
• 可实际上，它俩只隔30px，

后来才知道有个叫“外边距合并”的鬼东西。

然后，我开始琢磨，这margin-bottom还能玩出什么花样。然后发现，它竟然还能设置负值！

我试着给一个<div>设置margin-bottom: -20px，你猜怎么着？

它竟然往上“窜”，跟下面的<div>重叠一部分！这下，我算是开眼，原来margin-bottom还能这么玩！

总结一下今天的实践心得：

这margin-bottom，用起来可得小心。别看它只是个小小的属性，里面的门道还真不少。

实践出真知，古人诚不欺我。以后再遇到啥CSS的问题，咱也得多动手试试，才能彻底弄明白它们。