• 欢迎访问通通学,知识学习与分享的平台。本站点目前包括IT互联网、外国语、人文历史、兴趣爱好、电子竞技和新闻热点六大模块的内容。

《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)

IT互联网 芝加哥 386次浏览 已收录 1个评论

内边距在盒子模型中是内容区和边框之间的距离,在盒子模型中内边距分为上内边距padding-top,下内边距padding-bottom,左内边距padding-left,右内边距padding-right以及上述综合padding样式。

上内边距padding-top

上内边距就是内容区与上边框的距离,语法:

padding-top:取值

例如:

<!doctype html>
<html>
	<head>
		<title>内边距</title>
		<meta charset="utf-8">
		<style>
		    .line{padding-top:40px;border:1px solid red;width:400px;}
		    .line img{width:400px;}
		</style>
	</head>
	
	<body>
		<div class="line"><img src="./pic.png"></div>
	</body>
</html>

效果:
《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)
注意:上内边距的距离是本盒子的内容区与本盒子的上边框的距离,这跟上外边距margin-top是不一样的,margin-top是指本盒子与上方盒子的距离。

下内边距padding-bottom

下内边距就是内容区与下边框的距离,语法:

padding-bottom:取值

例如:

<!doctype html>
<html>
	<head>
		<title>内边距</title>
		<meta charset="utf-8">
		<style>
		    .line{padding-bottom:40px;border:1px solid red;width:400px;}
		    .line img{width:400px;}
		</style>
	</head>
	
	<body>
		<div class="line"><img src="./pic.png"></div>
	</body>
</html>

效果:
《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)

左内边距padding-left

左内边距就是内容区与左边框的距离,语法:

padding-left:取值

例如:

<!doctype html>
<html>
	<head>
		<title>内边距</title>
		<meta charset="utf-8">
		<style>
		    .line{padding-left:40px;border:1px solid red;width:400px;}
		    .line img{width:400px;}
		</style>
	</head>
	
	<body>
		<div class="line"><img src="./pic.png"></div>
	</body>
</html>

效果:
《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)

右内边距padding-right

右内边距就是内容区与右边框的距离,语法:

padding-right:取值

例如:

<!doctype html>
<html>
	<head>
		<title>内边距</title>
		<meta charset="utf-8">
		<style>
		    .line{padding-right:40px;border:1px solid red;width:400px;}
		    .line img{width:400px;}
		</style>
	</head>
	
	<body>
		<div class="line"><img src="./pic.png"></div>
	</body>
</html>

效果:
《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)

内边距综合样式padding

将上述4个内边距样式一起写,语法:

padding:取值;

其中:
padding的取值可以是1到4个,意思分别如下:
(1)、如果取值设置为1个值时,例如:{padding:20px;},说明所有的内边距都是20px;
(2)、如果取值设置为2个值时,例如:{padding:20px 30px;},说明上下内边距是20px,左右内边距是30px;
(3)、如果取值设置为3个值时,例如:{padding:10px 20px 30px;},说明上内边距为10px,左右内边距为20px,下内边距为30px;
(4)、如果取值设置为4个值时,例如:{padding:10px 20px 30px 40px;},说明上内边距是10px,右内边距为20px,下内边距为30px,左内边距为40px。

例如:

<!doctype html>
<html>
	<head>
		<title>内边距</title>
		<meta charset="utf-8">
		<style>
		    .line{padding:40px 80px 10px 0px;border:1px solid red;width:400px;}
		    .line img{width:400px;}
		</style>
	</head>
	
	<body>
		<div class="line"><img src="./pic.png"></div>
	</body>
</html>

效果:
《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)

关注微信公众号

《HTML+CSS+JS 网页制作》- 盒子模型-内边距样式(四)




通通学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明本文链接http://www.tongtongxue.com/archives/7744.html
喜欢 (3)

您必须 登录 才能发表评论! 如果您还没有注册,请点击这里,快速免费完成注册吧!

(1)个小伙伴在吐槽
  1. :mrgreen: 很详细。赞赞
    Jane2017-07-18 13:15