padding-top
weibo_happy的小小明_0
2017-04-16 16:03
#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到底是 个怎么回事呢
小白好多不懂，还望大神赐教
2回答
-
- 慕娘1072789
- 2017-08-03 10:34:58
<i>标签绝对定位后，脱离了标准文档流，所以padding-top只会影响P标签的文字
-
- 迎风向上乀
- 2017-04-16 21:32:48
1 <a href="#"><i><img src="" /></i><p>文字</p></a>
display: inline-block; display 属性规定元素应该生成的框的类型。inline-block 行内块元素 ,就相当于把这个<a></a>设置为块状元素>。你可以把<a>当做一个<div>一样,里面包含着<i><img><p>三个元素,所以这个padding-top就是影响了这三个元素,也就是<p>文字<p>会距离这个<a>的顶部距离为你设置的值。
当你注释掉后,里面的元素呈现的效果就只有text-align: center和line-height: 25px;
（line-height是行高的意思,这个用法我还没有过多的接触,学生初级小白一枚,就是如果你要设置字体垂直居中的话就把行高和框高设置一样就行）
2 第二个问题,在a当中 设置了这个元素position: relative;它的意思是相对定位,将影响接下来有设置position: absolute的元素,这个position: absolute的意思是绝对定位,它的意思是基于这个设置了relative的元素位置而定义自己的位置,比如这里的top:10px;意思就是<i></i>这个块状元素（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
我讲的是我大概的意思,你也可以参考下手册然后自己的理解思考下吧。
3.
JS动画效果
113925 学习 · 1443 问题
相似问题