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; }
顯示如下:
當(dāng)我注釋掉padding-top這一句代碼時
改為padding-top:20px;時:
1.這個padding-top不是a標(biāo)簽的頂部填充屬性嗎,那么怎么影響到p標(biāo)簽中的文字的呢?
2.padding-top在盒子模型里是內(nèi)容到頂部邊框的距離,a標(biāo)簽的內(nèi)容就是i和p標(biāo)簽,不應(yīng)該是圖片到頂部邊框的距離嗎,但是在i標(biāo)簽又設(shè)置了top=10px;使得這個圖片到頂部邊框的距離為10px,那么padding-top到底是 個怎么回事呢
小白好多不懂,還望大神賜教
2017-08-03
<i>標(biāo)簽絕對定位后,脫離了標(biāo)準(zhǔn)文檔流,所以padding-top只會影響P標(biāo)簽的文字
2017-04-16
1?<a href="#"><i><img src="" /></i><p>文字</p></a>
display:?inline-block;?display 屬性規(guī)定元素應(yīng)該生成的框的類型。inline-block ? ?行內(nèi)塊元素 ,就相當(dāng)于把這個<a></a>設(shè)置為塊狀元素>。你可以把<a>當(dāng)做一個<div>一樣,里面包含著<i><img><p>三個元素,所以這個padding-top就是影響了這三個元素,也就是<p>文字<p>會距離這個<a>的頂部距離為你設(shè)置的值。
當(dāng)你注釋掉后,里面的元素呈現(xiàn)的效果就只有text-align:?center和line-height:?25px;?
(line-height是行高的意思,這個用法我還沒有過多的接觸,學(xué)生初級小白一枚,就是如果你要設(shè)置字體垂直居中的話就把行高和框高設(shè)置一樣就行)
2 第二個問題,在a當(dāng)中 設(shè)置了這個元素position:?relative;它的意思是相對定位,將影響接下來有設(shè)置position:?absolute的元素,這個position:?absolute的意思是絕對定位,它的意思是基于這個設(shè)置了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.