026_CSS内边距

最新推荐文章于 2024-05-26 08:31:11 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-05-26 08:31:11 发布

阅读量311

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109084529

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS内边距属性，包括padding-top、padding-right、padding-bottom、padding-left以及简写属性padding。内容涵盖了内边距的设置、默认值、可能的值以及值复制规则，并通过实例展示了不同方式设置内边距的效果。此外，还解释了内边距百分比数值的计算方式，即相对于父元素宽度。

摘要由CSDN通过智能技术生成

1. 元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。

2. CSS内边距属性

3. 所有内边距都不允许使用负值。

4. 上内边距

4.1. padding-top属性设置元素的上内边距(空间)。

4.2. 行内元素上内边距不会影响行高计算。从视觉上看可能会延伸到其他行, 有可能还会与其他内容重叠。

4.3. 默认值

4.4. 可能的值

5. 右内边距

5.1. padding-right属性设置元素右内边距(空白)。

5.2. 行内元素右内边距仅在元素所生成的第一个行内框的右边出现。

5.3. 默认值

5.4. 可能的值

6. 下内边距

6.1. padding-bottom属性设置元素的下内边距(底部空白)。

6.2. 行内元素下内边距不会影响行高计算。从视觉上看可能会延伸到其他行, 有可能还会与其他内容重叠。

6.3. 默认值

6.4. 可能的值

7. 左内边距

7.1. padding-left属性设置元素左内边距(空白)。

7.2. 行内元素左内边距仅在元素所生成的第一个行内框的左边出现。

7.3. 默认值

7.4. 可能的值

8. 内边距

8.1. padding简写属性在一个声明中设置所有内边距属性。

8.2. 您还可以按照上、右、下、左的顺序分别设置各边的内边距,使用空格进行分割, 各边均可以使用不同的单位或百分比值:

h1 {
	padding: 10px 0.25em 2pt 20%;
}

8.3. 默认值

8.4. 可能的值

8.5. 值复制

8.5.1. 我们可以不用同时设置4个单边的内边距值, 只设置1个、2个、3个都是没有问题的, CSS会根据设置的内边距值进行值复制

h1 {
	padding: 10px;
}
h2 {
	padding: 10px 10%;
}
h3 {
	padding: 10px 10% 10pt;
}

8.5.2. 如何值复制:

如果缺少左内边距的值, 则使用右内边距的值。
如果缺少下内边距的值, 则使用上内边距的值。
如果缺少右内边距的值, 则使用上内边距的值。

8.5.3. 下图提供了更直观的方法来了解这一点:

9. 实例

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS内边距</title>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0; 
				padding: 0;
			}
			p {
				width: 560px;
			}
			.p1 {
				background-color: pink;
  				padding-top: 30px;
			  	padding-right: 25em;
			  	padding-bottom: 50pt;
			  	padding-left: 20%;
  			}
  			.p2	{
  				background-color: blue; 
  				padding: 30px;
  			}
  			.p3	{
  				background-color: red;	
  				padding: 30px 80px;
  			}
  			.p4	{
  				background-color: green; 
  				padding: 30px 80px 130px;
  			}
		</style>
	</head>
	<body>
		<p class="p1">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p>
		<p class="p2">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p>
		<p class="p3">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p>
		<p class="p4">元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。</p>
	</body>
</html>

9.2. 效果图

10. 内边距的百分比数值

10.1. 内边距百分数值是相对于其父元素的width计算的, 这一点与外边距一样。所以, 如果父元素的width改变, 它们也会改变。

10.2. 上下内边距与左右内边距一致, 即上下内边距的百分数会相对于父元素宽度设置, 而不是相对于高度。

10.3. 例子

10.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS内边距百分比</title>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0; 
				padding: 0;
			}
			div {
				width: 800px; 
				height: 500px;
			}
			p {
				padding: 10%; 
				background-color: pink; 
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>上下内边距与左右内边距一致, 即上下内边距的百分数会相对于父元素宽度设置, 而不是相对于高度。</p>
		</div>
	</body>
</html>

10.3.2. 效果图