子元素设置内边距、外边距超出父元素

• 2022 年 6 月 2 日
• 笔记
• CSS, Web 应用开发, 解决方案

问题

子元素设置内边距或外边距时，子元素宽度+内边距+外边距要小于父元素的宽度或高度，否则就超出父元素的范围。

<div class="parent-box">
	<div class="child-box"></div>
</div>

.parent-box {
	width: 200px;
	height: 200px;
	background-color: #C4A0CC; /* 粉色 */
}

.child-box {
	width: 100%;
	height: 100px;
	padding: 5px;
	background-color: #7979DE; /* 紫色 */
}

子元素的内边距是 5px，子元素的宽度+内边距大于父元素的宽度 200px。所以，子元素超出父元素的宽度。子元素的宽度应该是200px - 5px - 5px，即 190px。

box-sizing

正好 CSS 有一个属性box-sizing可以直接解决我们的顾虑，目的就是避免子元素设置内边距以及外边距时，且子元素的宽度等于父元素的宽度，导致子元素超出父元素最大宽度的问题。

它可以接受两个值：border-box 和 content-box。content-box 是默认值，也就是说我们设置内边距、外边距时，子元素可能超出父元素的范围。最重要的是 border-box，只要子元素可能超出父元素的范围，使用它就没错。

注意：如果子元素可能超出父元素的范围，就在子元素上使用 border-box。

.child-box {
	width: 100%;
	height: 100px;
	padding: 5px;
	box-sizing: border-box;
	background-color: #7979DE; /* 紫色 */
}