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到底是 個怎么回事呢
小白好多不懂,還望大神賜教
2017-08-03
<i>標簽絕對定位后,脫離了標準文檔流,所以padding-top只會影響P標簽的文字
2017-04-16
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.