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

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;
}

Live jsFiddle example

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更长，所以它突出底部，看起来输入是在顶部。执行以下操作：

• 将填充应用于外部div的CSS而不是输入框 如果你愿意，可以在输入中应用保证金，但我认为填充 包含div更好。
  • 使输入框的宽度小于div（<100％）