內聯元素空隙問題

2022-08-27 20:30:15 字數 652 閱讀 6225

最近寫乙個頁面的時候發現,內聯元素之間會有幾畫素的空隙,既不是margin也不是padding,最終發現是由於換行符、製表符(tab)、空格等字元引起的。

內聯元素

內聯元素

內聯元素

內聯元素

內聯元素

總結一下解決方案:

方法一:既然是由於行符、製表符(tab)、空格等字元引起,那麼就去掉內聯元素之間的行符、製表符(tab)、空格,但這樣**會比較難看

方法二:用html注釋代替換行

內聯元素

內聯元素

內聯元素

內聯元素

內聯元素

方法三:設定margin-right為負值,需要考慮上下文的字型和文字大小,不建議這樣做

方法四:給內聯元素的父級設定font-size:0

div 

span

其中ie6 7下始終存在1px的空隙,需要使用word-spacing減少單詞間的空白(即字間隔)word-spacing:-1px;另外,加了浮動內聯元素是不會有這個空隙的。

內聯元素空隙問題

最近寫乙個頁面的時候發現,內聯元素之間會有幾畫素的空隙,既不是margin也不是padding,最終發現是由於換行符 製表符 tab 空格等字元引起的。內聯元素 內聯元素 內聯元素 內聯元素 內聯元素 總結一下解決方案 方法一 既然是由於行符 製表符 tab 空格等字元引起,那麼就去掉內聯元素之間的...

inline block 元素間存在空隙

inline block 元素間存在空隙的解決辦法 將元素的 display 屬性設定為 inline block 時,inline block元素之間會呈現出幾畫素的空隙。html結構 class box class item inline blocka class item 行內塊元素a cla...

塊元素 內聯元素 內聯塊元素

元素就是標籤 在布局中常用標籤有三種 塊元素 內聯元素 內聯塊元素 1.塊元素也是行級元素 在布局中常用的標籤有 div p ul li h1 h6 dl dd dt等。在布局中的行為 如果不設定固定寬度預設百分之百,不設定高度 由內容撐起,獨佔一行 2.內聯元素也是行內元素 在布局中常用的標籤有 ...