利用padding實現可控的分隔線

一.實現分隔線的方法（未理解：不是說span元素垂直方向設置怕padding不影響嗎？）

html：

1 <div>
2 登陸<span></span>註冊
3 </div>

css：

1 .span{

2 padding: 12px 6px
1px;/*這裡通過改變第一個參數和第三個參數可以調節風隔線的的上下高度，分別是padding-top和padding-bottom*/

3 margin-left:12px;

4 border-left:2px solid #000;

5 font-size: 0;

6 }

實現原理：打開chrome瀏覽器開發者工具進行盒子模型的查看。

圖1：將span標籤的margin-left設置為12px，對應效果如圖1。

圖2：為使分隔線左右兩邊空白對稱，這裡將span的padding-left和padding-right都設置為6px，因為span中沒有內容，所以加起來一共是12px，與margin-left相同。

圖3：定義span元素的左邊框作為分割線。

圖4：至此，通過調節padding-top和padding-bottom，來撐大或是減少盒子的整體高度，以此來調節分隔線。

中公優就業IT培訓，總有你想學的：http://xue.ujiuye.com

勤工儉學計劃，0元學IT!

http://www.ujiuye.com/zt/qgjx/?wt.bd=mmxtt

找工作太難?我們來幫你一舉拿下!

http://www.ujiuye.com/zt/jycj/?=mmxtt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！