span標簽對於margin-top,margin-bottom無效,但是margin-left,margin-right卻是有效的。


首先,span是行內元素,是沒有寬高的。

我們來做個簡單的布局

    <div>
	<span>內容內容內容內容內容內容內容內容</span>
    </div>

頁面的最原始的效果,就給div加個邊框:

為了能夠讓span的margin-top和margin-bottom生效,可以按照下面的做法:給span加一個display:inline-block或者直接display:block;具體操作,隨你自己。

還有一個就是,你想讓文字居中,就可以借助line-height,這個時候,就可以不需要display來控制了,你要多高,就改變line-height的值就可以,也不需要margin-top或者margin-bottom,因為你加了line-height本來文字居中了,然后你加個外邊距,反倒讓文字偏移了預期,這就多此一舉了。

需要說明的就是,span的margin-left和margin-right是本來就有效的,跟display屬性沒有關系。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM