为何给width为100%的按钮设置margin-left会超出父容器右侧边界

核心原理 #

• CSS中width: 100%的取值规则是：参考父元素的内容区宽度计算，不包含父元素的padding、border，也不会自动扣除当前元素的margin、border、padding值
• 你的示例中父容器#one的内容区宽度固定为200px，按钮设置width: 100%后自身内容宽度被固定为200px，再叠加margin-left: 2rem的左外边距，总占位宽度达到200px + 2rem，超出父容器总宽度，因此会从右侧溢出
• 你修改按钮display属性仍然溢出的原因是：只要手动指定了width: 100%，无论display是inline-block还是block，都会触发固定宽度计算逻辑，不会触发块级元素默认width: auto的自适应特性
• 下方div#two没有溢出的原因是：未指定宽度的块级元素默认width: auto，此时浏览器会自动计算margin + border + padding + 内容宽度的总和，让其刚好填满父容器的可用空间，设置margin-left: 2rem后内容宽度会自动缩减为200px - 2rem，因此不会溢出

可行解决方案 #

• 方案1：删除按钮的width: 100%声明，将按钮设置为display: block，利用默认width: auto的自适应特性，左外边距会自动被计入总宽度计算，不会发生溢出
• 方案2：保留width: 100%的同时，使用calc函数扣除margin的宽度：width: calc(100% - 2rem)
• 方案3：如果按钮需要设置内边距、边框，可额外添加box-sizing: border-box，注意该属性仅处理border和padding的计算，不会覆盖margin的宽度，仍需配合上述两种方案使用

内容的提问来源于stack exchange，提问作者BenjiFB