Question

1）当我指定宽度margin-right无效时（仅在位置上是'static'）？

<style type="text/css">
    body{
        border:1px solid #808080;
        width:500px;
        height:500px;
    }
    div {
        border: 1px solid #0094ff;
        width: 200px;
        /*margin-left:50px;*/ /* ok */
        /*margin-top:50px;*/ /* ok */
        margin-right: 50px; /* invalid,not working ?*/
        margin-bottom: 50px; /* invalid,not working?*/
    }

</style>
<body>
   <div>test div</div>
</body>

2）为什么当我删除div的宽度时，margin-right会生效？

3）为什么当我移除身体的高度时，边缘底部会生效？

匹配margin-right和margin-bottom规则的默认布局中的CSS是什么？

我的意思是 div位置是'静态'和不使用'float'属性。感谢。

Answer 1

您的代码很好且有效。但是，要查看您尝试应用的效果，您需要添加更多元素进行比较。

添加margin-bottom表示您的div下的元素会被推下。相同宽度margin-right：div旁边的元素将被推送到右侧。

为了展示您的网页，我又增加了3个divs浮动，以便您可以看到边距如何影响右侧和底部：

body {
  border: 1px solid #808080;
  width: 500px;
  height: 500px;
}
div {
  border: 1px solid #0094ff;
  width: 150px;
  margin-right: 50px;
  margin-bottom: 50px;
  float: left;
}

<div>Lorem.</div>
<div>Officiis.</div>
<div>Asperiores.</div>
<div>Enim.</div>

为什么在指定宽度margin-right时无效？

1 个答案: