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

时间:2016-08-06 16:59:22

标签: html css

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'属性。 感谢。

1 个答案:

答案 0 :(得分:1)

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

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

为了展示您的网页,我又增加了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>