盒子模型之内边距

最新推荐文章于 2023-11-28 15:35:35 发布

不知道叫什么呢123

最新推荐文章于 2023-11-28 15:35:35 发布

阅读量778

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_48519907/article/details/110294666

版权

padding属性

该属性用于设置内边距,即边框与内容之间的距离。

padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

问:文字内容和盒子离的太近,怎么增加他们之间的距离?

答：用 padding 属性。

例：

	<body>
		<div>
			盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
		</div>
	</body>

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			padding-left: 20px;
			padding-top: 30px;
		}

效果：
在这里插入图片描述

内边距的简写

padding 简写属性,可以有一到四个值。

padding: 5px;  /* 1个值,代表上下左右都有5像素内边距. */
padding: 5px 10px; /* 2个值,代表上下内边距5px,左右10px. */
padding: 5px 10px 20px; /* 3个值,代表上内边距5px,左右10px,下20px. */
padding: 5px 10px 20px 30px;/* 4个值,代表上右下左,顺时针方向. */

以上四种情况都要记住。

内边距会影响盒子的实际大小

	<body>
		<div>
		padding会影响盒子的实际大小padding会影响盒子的实际大小padding会影响盒子的实际大小padding会影响盒子的实际大小padding会影响盒子的实际大小padding会影响盒子的实际大小
		</div>
	</body>

			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				padding: 20px;
			}

注意：
1.本来设置的盒子是 200200 的,现在由于padding值,导致盒子变成了 240240 。

2.当我们给盒子指定padding值之后,发生了两件事:
(1)内容和边框有了距离,添加了内边距。

(2)padding影响了盒子的实际大小.也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。

(3)解决方案:让 width 和 height 减去多出来的内边距大小。

内边距不会影响盒子的实际大小（重点）

情况一：

	<body>
		<h1></h1>
	</body>

			h1 {
				height: 200px;
				background-color: pink;
				padding: 30px;
			}

没有给 h1 指定 width 那么就和父元素 body 一样宽,即和浏览器一样宽。这样的结果是：高度多加了 padding 值,变为260px,但宽度不变.只要指定 width 再加 padding 值，肯定会被撑开。
不要写一个 width:100%; 有width 那么就会被撑开。

总结：可以这么理解，只要设了 width 或者 height。那么 padding 就会去撑开那个属性。
padding 不会撑开没有设置的那个属性。

情况二：

	<body>
		<div>
			<p></p>
		</div>
	</body>

			div {
				width: 300px;
				height: 100px;
				background-color: purple;
			}

			div p {
				padding: 30px;
				background-color: skyblue;
			}

这里 p 没有指定宽度，那么和父亲 div 一样宽。此时，增加 padding 值，不会把 width 撑到360px。

注意：
如果写了 width: 100%;宽度就和它父亲一样，再加上 padding 的值就会超出父亲 60px。变成360px。