css 中的padding對於前端工程師來講我相信大家都不陌生,
w3c是這樣說的:屬性設定元素所有內邊距的寬度,或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算;因此,如果一個元素既有內邊距又有背景,從視覺上看可能會延伸到其他行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值
這裡說到背景有點意思,可以研究一下哦
下面我們看看css的padding製作一個管道符。
方法/步驟
這裡先看看 w3c 的一些說明,溫故而知新嘛;
開始了 這一個小例子我們要做的是一個 看起來居中對齊的一個 管道符,相信大家都很常見吧。
先看一下html結構,這裡我沒有在span內容中新增任何東西。
往下看就知道為什麼了;
先把這裡的span的css抄下來 下面給一些解釋
首先解釋一下這裡的padding和margin
padding給了三個引數,左右為6,那麼我們就可以控制上下了。
上多少下多少,你就可以自由的控制了。達到看起垂直居中效果。
因為左右為6 那麼空間上span多了12 所以給一個marging-left:12px 這樣水平居中了
這裡給border值沒有什麼好說的吧,都能看懂,需要什麼顏色後面自己新增即可;
font-size:0 ;span中有什麼內容都看不見了。