如何防止填充子元素溢出其父元素？

Question

从this example可以看出，input似乎“溢出”了它的父母div。我想在input中添加填充而不会使其溢出其父级。

我想知道每个浏览器（包括IE，Firefox，Chrome等）的最佳解决方案/解决方法。

Answer 1

你可以看看this answer，但是如果你不喜欢它，你可以使用box-sizing CSS3属性，如下所示：

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 2

填充会增加对象的宽度。一种选择是从输入中删除左/右填充，只使用text-indent，尽管这会删除正确的填充。

.inside{
    background: blue;
    border: none;
    padding-bottom: 10px;
    padding-top: 10px;
    text-indent: 10px;
    width: 100%;
}

或者，您可以使用百分比，而不是使用硬编码的像素宽度作为填充，并从宽度中减去该值：

.inside{
    padding: 3%;
    width: 94%;
}

Answer 3

不要将内部div的宽度指定为100%。 div将自动适合其父容器的宽度。 Demo

Answer 4

看起来输入位于div内部，但位于左上角。因为输入占据了div宽度的100％，所以它会遮挡div的红色背景。 div更长，所以它突出底部，看起来输入是在顶部。请执行下列操作：