css - 子元素继承宽度问题

Question

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

为了尝试解决这个问题，我只需将 CSS 宽度属性设置为我想要的任何值。当我在浏览器中预览时，它已经正确调整了宽度，但它现在已经扩展了右边距以填充容器。

我试图通过执行诸如 margin-right: 0; 之类的事情来抵消这一点。或使用负值，但没有任何效果

Answer 1

孩子的宽度永远不会从父母那里继承（父母指定的确切值）！但是，它取决于父级的宽度。如果您在父级上指定宽度并有一个块级子级，它将始终扩展为父级宽度的 100%。这是完全正常的行为。

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

• 考虑填充
• 改变盒子模型

的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 属性，并不是每个浏览器都可以处理它。