Question

所以我遇到这个奇怪的问题，我在容器中有一个元素，它继承了conatiner的宽度。

尝试修复此问题我只是将css width属性设置为我想要的任何内容。当我在浏览器中进行预览时，它已经正确调整了宽度，但它现在已经扩展出右边距以填充容器。

我试图通过像margin-right这样的东西来抵消这个：0;或使用负值，但没有任何工作

Answer 1

子节点的宽度永远不会从父节点继承（父节点上指定的确切值）！但是，依赖于父级的宽度。如果在父项上指定宽度并具有块级子项，则它将始终扩展为父项宽度的100％。这是完全正常的行为。

如果在子元素上设置显式宽度，则必须注意，填充和边框不计入总宽度（使用标准框模式）。您有两种选择：

帐户填充
改变box-modell

css：

#parent{
   width:100px;
}
#child{
   padding:10px;
   width:100px;   /* child will be 20px too wide */
}
/*method 1*/
#child{
   padding:10px;
   width:80px;   /* child will fit perfectly: 80px +10px + 10px */
}
/* method 2*/
#child{
   padding:10px;
   width:100px;
   box-sizing:border-box;      /* child will fit perfectly
                               width now includes content and padding */
   -moz-box-sizing:border-box; /* for compatibility*/
   -webkit-box-sizing:border-box;
}

但请注意，box-sizing是较新的css属性，并非每个浏览器都可以处理它。

子元素继承宽度问题

1 个答案: