間距就來了~~

我們使用CSS更改非inline-block水平元素為inline-block水平，也會有該問題：

<div class="space"> <a href="##">惆悵</a> <a href="##">淡定</a> <a href="##">熱血</a> </div>

您可以狠狠地點擊這里：inline-block元素間間距demo
這種表現是符合規范的應該有的表現（如果有人認為是bug就太()ay ()oy 了）。
不過，這類間距有時會對我們布局，或是兼容性處理產生影響，需要去掉它，該怎么辦呢？以下展示N種方法（歡迎補充）！
二、方法之移除空格元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：
<div class="space"> <a href="##"> 惆悵</a><a href="##"> 淡定</a><a href="##"> 熱血</a> </div>
或者是：
<div class="space"> <a href="##">惆悵</a ><a href="##">淡定</a ><a href="##">熱血</a> </div>
或者是借助HTML注釋：
<div class="space"> <a href="##">惆悵</a><!-- --><a href="##">淡定</a><!-- --><a href="##">熱血</a> </div>
等。
三、使用margin負值 
.space a { display: inline-block; margin-right: -3px; }
margin負值的大小與上下文的字體和文字大小相關，其中，間距對應大小值可以參見我之前“基于display:inline-block的列表布局”一文part 6的統計表格：

例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。
由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。
四、讓閉合標簽吃膠囊如下處理：
            








上一篇：19樓網頁廣告設計規范


下一篇：淘寶店鋪設計的方法教程 寶貝描述的詳細處理方法














發表評論
共有條評論






用戶名:

密碼:



驗證碼:

 

匿名發表