文章目录
CSS
- 子容器通过设置
margin-right
调整与父元素的位置时的失效
问题(现象)
当子容器没有设置宽度时,即没有显示地设置width: value;
时,margin-right
还是能有效果,但一旦子容器设置了宽度,margin-right
就失效了。除非设置浮动到右边,即float: right;
。(可能还有其他特殊的情况,但还未能找出验证)
css 代码:
.box {
margin-top: 10px;
margin-right: 30px; /* 尝试设置参数, 发现不会左右移动 */
margin-bottom: 10px;
margin-left: 10px;
width: 80%;
box-sizing: border-box;
border: 4px solid red;
height: 80px;
/* float: right; */
}
.container {
width: 600px;
border: 4px solid blue;
height: 100px;
}
html 代码:
<div class="container">
<div class="box">Change my margin.</div>
</div>