前言

為了個文檔結構條理性，我也來個前言，雖然不知道寫個啥。但向大神學習態度不能丟。因為這個問題簡單，邏輯性不強，就直接上問題上代碼上解決方案了。大神勿噴，有什么問題，別的解決方案方法，希望大神們多多指點

問題描述

行內塊元素之間，瀏覽器會有一個默認的間距，例如照片之間的間距，或者是別的元素類型直接轉換過來的行內塊元素，瀏覽器都會有默認的間距。話不多說，直接上圖解釋其中的bug。

實現上述效果代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>test測試行內塊之間的默認邊距</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .wrap div{
            width: 300px;
            height: 300px;
            display:inline-block;
        }
        .wrap div:first-child{
            background-color: green;
        }
        .wrap div:last-child{
            background-color: blue;
        }
        img{
            width:300px;
            height: 300px;
        }
        .content{
            /*word-spacing:-20px;*/
            /*font-size:0;*/
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
    </div>
    <div class="content">
        <img src="tv01.jpg">
        <img src="tv01.jpg">
    </div>
    <textarea rows="2" cols="2"></textarea>
    <textarea rows="5" cols="5"></textarea>
</body>
</html>

解決方案

最近總結了一些方法來解決這樣的bug，常用的方法有：
1.將所有的行內塊元素直接設置浮動，個人認為最直接的方法，當然是在適當的場景中，因為過度的浮動會產生需要清除浮動的必要（自己也總結常用的清除浮動的方法，有興趣可以喵喵看看，大神越過）。
2.在產生邊距的行內塊的父元素設置屬性：font-size：0px;
3.在父元素上設置，word-spacing(詞邊距)的值設為合適的負值即可
4.在html中將行內塊元素在同一行顯示，不要進行美觀縮進或者換行

免責聲明！

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

猜您在找 如何取消行內元素之間的間距問題行內塊元素默認外邊距問題行內元素之間間距的產生與去除 html行內塊元素之間的縫隙 H5常用的行內元素、塊級元素、行內塊元素以及它們之間的區別行內元素默認間距的4種解決辦法解決行內塊元素（inline-block）之間的空格或空白問題行內元素和塊級元素之間有什么區別？行內塊元素出現間隙的問題 Form表單與塊級元素/行內元素寬高問題