Question

我写了一个简单的html文件，看看css中的边距是如何崩溃的，但我没有得到预期的答案。首先，我会告诉你我的代码：

import android.app.*;
import android.os.*;

public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

我已经分别设置了第一图像10px的右边距和第二图像20px的左边距。我预计在第一张图像的右边和第二张图像的左边之间会有20像素，因为只有更大的边距才能在折叠边距中生效。但是当我在Google开发人员工具中检查它时，它们之间的空间是30px（10px + 20px）。它出什么问题了？或者我对崩溃边际有错误的理解？

Answer 1

Margin Collapsing仅适用于Block级别元素。
只有顶部和底部边缘崩溃，Right＆amp;左撇子没有。
元素的下边距及其下一个元素的上边距将被折叠。

这里解释得非常好：https://css-tricks.com/what-you-should-know-about-collapsing-margins/

只是提示：Google在发布问题之前已经足够了！

Answer 2

Sandip已经指出了。

边距折叠仅适用于块级元素。

顶部和底部边缘也崩溃了。折叠不适用于左右边距。

为了您的清晰，我将您的代码段编辑为使用块级元素替换img 以及左上角和右上角更换边距以便您可以看到利润率崩溃。左右边距也不会发生同样的情况。

＆＃13;

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>Collapsing Margins Testing</title>
    <style type="text/css">
        .first, .second  {
            width: 300px;
            height: 300px;
        }
        
        .first {
            margin-bottom: 10px;
            background: green;
        }
        
        .second {
            margin-top: 20px;
            background: yellow;
        }
    </style>
</html>

<body>
   <div class="first">aaa</div>
 
   <div class="second">bbb</div>
  
</body>

＆＃13;

为什么我的折边利润代码不起作用？

2 个答案: