Tips_利用padding實現高度可控的分隔線

本文轉載於:猿2048網站Tips_利用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，來撐大或是減小盒子的總體高度，以此來調節分隔線。