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'属性。 感谢。
答案 0 :(得分: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>