Question

假设我有两个div - 父母和孩子。父div的宽度为200px，子宽度为105％。现在，孩子的右边缘会向外流动。这是代码：

.container1 {
              width: 200px; height: 200px;
              border: 1px solid black;
              margin-left: 100px;
}
.container2{
              width: 105%;
              border: 1px dotted red;
              height: 200px;
              margin-right: 10%;
}

<div class="container1">
  <div class="container2"></div> 
</div>

我的问题为什么没有正面或负面价值的保证金权利对儿童div有效？另一方面，保证金左边有正值和负值。

Answer 1

您可以有正或负的保证金价值。在你的代码中，你得到了一个错字。它应该是：

margin-right: 10%;

<强>更新

如果要在执行inspect元素时查看分配的边距，可以使用display: inline-block到子元素。但是，既然你设置了它的父级宽度，它仍然没有任何效果，或者不会将元素推到它旁边。

＆＃13;

.container1 {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin-left: 100px;
}
.container2 {
  width: 105%;
  border: 1px dotted red;
  height: 200px;
  margin-right: 10%;
  display: inline-block;
}

＆＃13;

<div class="container1">
  <div class="container2"></div>
</div>

＆＃13;

Answer 2

margin-right正在运行，但.container2比其父级大，但您看不到效果。请记住浏览器从左到右，从上到下渲染。

如果您希望有一个可见的右边距，无论.container2宽度，您都需要设置float: right;

.container2 { 
    width: 105%;
    border: 1px dotted red;
    height: 200px;
    margin-right: 10%;
    position: relative;
    float: right; 
}

如果孩子比父母更大，为什么边际权利不起作用？

2 个答案: