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

一、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、行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值