HTML子容器比父容器宽

Question

有一个外部div和一个内部div元素。有时我看到内部div比外部div宽。

这是什么时候发生的？以及如何克服这个问题？

<div id="outer">
  <div id="inner"></div>
</div>

Answer 1

根据comment内部元素比父元素宽的原因是由边距/填充引起的。设置

时会发生这种情况

(width + padding + margin + border) of child > parent width

example

解决方法：

• 对于保证金：您需要计算(width + margin) of child =< parent width demo
• 对于边框和填充：您可以使用box-sizing属性在元素 demo （或使用与保证金相同的技术）
• 对于边框，边距和填充：当您不需要在内部元素上设置宽度时，将其删除，并且块元素的默认行为将包括边距，填充和边框在父 demo
内

Answer 2

<div id="outer">
  <div id="inner">Inner Text</div>
</div>
<style type="text/css">
  #inner,  #outer {
    box-sizing: border-box;
    width: 100%;
    border: solid 1px #000;
    padding: 1%;
  }
</style>