padding不会撑开盒子的情景

最新推荐文章于 2024-06-24 14:26:23 发布

原创最新推荐文章于 2024-06-24 14:26:23 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

85 篇文章

订阅专栏

本文详细解析了CSS盒子模型中，当子元素未指定宽度时，内边距(padding)如何影响盒子尺寸。通过实例展示了在不同条件下，内边距是否会影响盒子的实际大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果一个盒子没有给定宽度/高度或者继承满父亲的宽度/高度，则padding 不会影响本盒子大小。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		height: 200px;
		background-color: pink;
		width: 300px;
		/* padding-left: 30px; 因为 父盒子 有宽度 给定值了，则padding会撑开*/

	}
	.son {
		padding-left: 30px;
		/*儿子 没有给定宽度 用的是默认的， 所以 padding 不会撑开盒子*/
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">123</div>
	</div>
</body>
</html>