内边距padding 内盒尺寸计算 padding不影响盒子大小情况

本文链接：https://blog.youkuaiyun.com/weixin_47183545/article/details/105865276

本文探讨了CSS中的内边距padding如何影响元素尺寸，详细解析了padding的简写形式，并指出在何种情况下padding不会改变元素的原始大小。

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

padding会撑大盒子。
内边距padding简写：1个值，上下左右内边距；2个值，上下左右；3个值，上左右下；4个值上右下左（顺时针）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				border: 2px solid black;
				/* padding-left: 15px; */
				/* padding: 20px; */
				/* padding: 20px 50px 60px; */
				padding: 20px 30px 40px 50px;
			}	
		</style>
	</head>
	<body>
		<div>坚持学习，每天打卡，加油加油，努力努力。</div>
	</body>
</html>

盒子的实际大小=内容的宽度高度+边框+内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
			/*使盒子宽高保持200*/
				width: 180px;
				height: 180px;
				background-color: pink;
				padding: 10px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>你好</div>
	</body>
</html>

padding不影响盒子大小情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			/* 如果没有给一个盒子指定宽度,给这个盒子指定了宽度,这个盒子也不会撑开 */
			p {
				height:30px;
				background-color: red;
				padding-left: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>不影响</p>
		</div>
	</body>
</html>