Question

我在另一个元素中有一个元素。父母有一定的规模。我希望孩子的大小完全相同，但同时要填充。

如果我不知道父母的确切大小，有没有办法让它与父母一样大小并且有填充？

问题：

感谢。

Answer 1

在支持的浏览器上，将box-sizing设置为border-box（仅限CSS3）。这会导致浏览器将元素的宽度计算为内容+填充+边框+边距（而不是CSS1 / 2框模型中的content-box）：

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

我认为输入默认情况下已经有此设置，但这也适用于您想要计算宽度的任何其他子元素。

Answer 2

创建子元素display:block（这将使其填充父元素的宽度）并给出父填充或给孩子一个边距。不要试图在子元素上指定宽度。

Answer 3

不幸的是，没有。在考虑任何填充/边距之前完成宽度计算，因此宽度为100％的子节点将是父节点的100％，之后会添加边距/填充，因此最终会有超过100％的内容。< / p>

您可以通过放置与背景颜色相同的边框来伪造效果。这样可行，因为你有一个坚实的背景让孩子跨越。

Answer 4

不是一个完美的解决方案，但它有效

删除左右填充padding:20px 0;并在text-indent:20px;上设置input

Answer 5

block-sizing: border-box不适用于我的特定问题，但是对于那些回到该问题的人还有另一种方法：

使用position: absolute和right:0（或底部为垂直约束）将孩子约束为父母。父元素应具有position: relative，并且被迫完全适合。