详述内边距样式属性(padding-top padding-right padding-bottom padding-left padding)

最新推荐文章于 2024-08-09 10:12:57 发布

泷憬

最新推荐文章于 2024-08-09 10:12:57 发布

阅读量5.4k

点赞数 2

分类专栏： CSS 文章标签： CSS之内边距样式属性

本文链接：https://blog.csdn.net/IT_Helianthus/article/details/90373849

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、padding-top样式属性

设置元素上内边距的宽度，该属性有多个值：

值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值
%	定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承上内边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>padding-top</title>
		<style type="text/css">
			.out_one{
				width: 300px;
				height: 300px;
				padding-top:12px;
				border:2px solid red;
			}
			
			.in_one{
				width: 100px;
				height: 100px;
				border:5px solid green;
			}
		</style>
	</head>

	<body>
		<div class="out_one"><div class="in_one">宽度和高度均为100px</div></div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。

二、padding-right样式属性

设置元素右内边距的宽度，该属性有多个值：

值	描述
length	规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值
%	定义基于父元素宽度的百分比右内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承右内边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>right</title>
		<style type="text/css">
			p{
				padding-right:270px;
				border:2px solid red;
			}
		</style>
	</head>

	<body>
		<p>margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right margin-right</p>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。

三、padding-bottom样式属性

设置元素下内边距的宽度，该属性有多个值：

值	描述
length	规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值
%	定义基于父元素宽度的百分比下内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承下内边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>right</title>
		<style type="text/css">
			p{
				padding-bottom:150px;
				border:2px solid red;
			}
		</style>
	</head>

	<body>
		<p>padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom</p>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。

四、padding-left样式属性

设置元素左内边距的宽度，该属性有多个值：

值	描述
length	规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值
%	定义基于父元素宽度的百分比左内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承左内边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>padding-left</title>
		<style type="text/css">
			.out_one{
				width: 300px;
				height: 300px;
				padding-left:12px;
				border:2px solid red;
			}
			
			.in_one{
				width: 100px;
				height: 100px;
				border:5px solid green;
			}
		</style>
	</head>

	<body>
		<div class="out_one"><div class="in_one">宽度和高度均为父元素的50%</div></div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。

五、padding样式属性

在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度，该属性有多个值：

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值
%	定义基于父元素宽度的百分比左内边距。
inherit	规定应该从父元素继承内边距。注：IE浏览器不支持"inherit"属性值。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>padding</title>
		<style type="text/css">
			p{
				padding:10px 30px 60px 150px;
				border:2px solid red;
			}
		</style>
	</head>

	<body>
		<p>padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom padding-bottom</p>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：
1、padding属性可以有 1 到 4 个值：

2、*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值，方便后面设置。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>padding</title>
		<style type="text/css">
			*{
				padding: 0;
			}
			
			ol{
				padding-left: 15px;
				border:1px solid;
			}
		</style>
	</head>

	<body>
		<ol>
			<li>小说</li>
			<li>文艺
				<ul type="disc">
					<li>文学</li>
					<li>传记</li>
					<li>艺术</li>
					<li>摄影</li>
				</ul>
			</li>
		</ol>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
3、行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距。