                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

padding-top

 #move a{
	display: inline-block;
	width: 58px;
	/*height: 55px;*/
	border:1px solid #ddd;
	background-color: #fff;
	text-align: center;
	margin: 10px 17px;
	position: relative;
	padding-top: 40px;
	color: #9c9c9c;
	font-size: 12px;
	text-decoration: none;
	line-height: 25px;
	overflow: hidden;
	}

#move a i{
	position: absolute;
	top: 10px;
	left: 0;
	display: inline-block;
	width: 100%;
	text-align: center;
	filter: alpha(opacity=100);
	opacity:1;
	}

显示如下：

当我注释掉padding-top这一句代码时

改为padding-top:20px;时：

1.这个padding-top不是a标签的顶部填充属性吗，那么怎么影响到p标签中的文字的呢？

2.padding-top在盒子模型里是内容到顶部边框的距离，a标签的内容就是i和p标签，不应该是图片到顶部边框的距离吗，但是在i标签又设置了top=10px;使得这个图片到顶部边框的距离为10px，那么padding-top到底是个怎么回事呢

小白好多不懂，还望大神赐教

weibo_happy的小小明_0

2017-04-16

源自：JS动画效果 7-1

关注问题我要回答

1230

操作

收起

2 回答

慕娘1072789
2017-08-03

标签绝对定位后，脱离了标准文档流，所以padding-top只会影响P标签的文字

1 回复有任何疑惑可以回复我~

收起回答

迎风向上乀
2017-04-16

1 <a href="#"><img src="" />文字</a>

display: inline-block; display 属性规定元素应该生成的框的类型。inline-block 行内块元素 ,就相当于把这个<a></a>设置为块状元素>。你可以把<a>当做一个<div>一样,里面包含着<img>三个元素,所以这个padding-top就是影响了这三个元素,也就是文字会距离这个<a>的顶部距离为你设置的值。

当你注释掉后,里面的元素呈现的效果就只有text-align: center和line-height: 25px;

（line-height是行高的意思,这个用法我还没有过多的接触,学生初级小白一枚,就是如果你要设置字体垂直居中的话就把行高和框高设置一样就行）

2 第二个问题,在a当中设置了这个元素position: relative;它的意思是相对定位,将影响接下来有设置position: absolute的元素,这个position: absolute的意思是绝对定位,它的意思是基于这个设置了relative的元素位置而定义自己的位置,比如这里的top:10px;意思就是这个块状元素（display: inline-block; ）距离这个<a>这个元素的顶部距离为10px。left就是距离<a>左边的距离.

http://www.w3school.com.cn/cssref/pr_padding-top.asp

http://www.w3school.com.cn/cssref/pr_class_display.asp

http://www.w3school.com.cn/cssref/pr_class_position.asp

我讲的是我大概的意思,你也可以参考下手册然后自己的理解思考下吧。