Question

所以这是我的代码

    <style>
    body{
    width:100%;
    height:100%;
    overflow:hidden;
    }

    .mouse{
    background-color: rgb(128,64,0);
    border-radius:100px;
    height:100%;
    width:10%;
    position:absolute;
    top:100%;
    box-sizing:border-box;
    }

    .left_ear{
    background-color: red;
    border-radius:100px;
    position:absolute;
    float:left;
    width:30%;
    padding:100%;

    }

    </style>

</head>

<body>
        <div class="mouse" id="mouse1">
            <div class="left_ear"></div>
            <div class="right_ear"></div>
        </div>
        <!--<div class="mouse" id="mouse2">
            <div class="left_ear"></div>
            <div class="right_ear"></div>
        </div>
        <div class="mouse" id="mouse3">
            <div class="left_ear"></div>
            <div class="right_ear"></div>
        </div>-->   
</body>

</html>

这是我得到的： Padding: 100%

Padding: 30%

那么填充如何工作？我的意思是我知道它会增加元素周围区域的基础知识，但永远不会增加元素的大小。

Answer 1

让我们说你有这样的元素：

＆＃13;

.parent{
  padding:20px;
  background:blue;
  display:inline-block;
}
.parent div{
  padding:20px;
  height:80px;
  width:80px;
}
.child1{
  background:green;
  box-sizing:border-box;
}
.child2{
  background:purple;
}

＆＃13;

<div class="parent">
  <div class="child1"></div><br>
  <div class="child2"></div>
</div>

＆＃13;

如您所见，第一个孩子小于第二个孩子，虽然他们得到的确切相同尺寸和填充。

在第一个孩子，我使用了属性box-sizing:border-box。这样做，它包括元素宽度/高度中的填充。

如果您不这样做，则填充已添加到元素宽度。

在您的示例中，您在父元素上获得了box-sizing:border-box。因此，如果您为该元素添加了边距，它将保持相同的大小（除了您设置的填充比元素更大）。在您的孩子身上，您还没有获得此属性，因此在使用填充时它们的大小会增加。

填充使元素更大，而不是清除元素周围的空间

1 个答案: