首頁 > web前端 > html教學 > 如何去除掉inline-block元素之間的預設間距

如何去除掉inline-block元素之間的預設間距

WBOY
發布: 2016-09-24 09:02:48
原創
1293 人瀏覽過

前幾天寫一頁

div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>
登入後複製
  <li></li>
登入後複製
登入後複製
  <li></li>
登入後複製
登入後複製
</ul>
登入後複製

 發現寬度為900px的div居然放不下3個寬度為300px的內聯元素li,只好改用了float:left來佈局。後來上網一查,才知道inline-block是有預設間距的,預設間距為4px,且inline也是有預設間距。現在就來盤點一些解決inline-block元素和inline元素之間間距的一些方法:

1、可以在html中直接把元素寫在一行上或把閉合標籤和第二個開始標籤寫在一行或兩行間添加註解或直接去掉閉合標籤但最後一個不能去掉。

2、設定margin-right為負值,但要考慮上下文的字體和文字大小。

3、先設定子元素字體,再設定父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、設定父元素letter-spacing或word-spacing為負值,要考慮字體,子元素有文字也要注意設定letter-spacing或word-spacing的值。

5.float:left;

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板