HTML元素间距问题

HTML 元素间距问题

在利用 CSS 布局时，经常会遇到一些没有定义间距 padding、margin 之类的内容，但是页面上却总会有一些不知从何而来的间距出现，下面就是我在自己的工作中遇到的一些常见情况的总结，及其消除方法。

  1. 并排 div 之间的间距。
    a. 多个 div 元素在定义属性：display:inline-block;后，多个 div 元素之间并排排列，但是它们之间总是隔着那么几像素的距离，即便你一次又一次修改自己的 padding、margin 设置为 0，都没办法取消。

    b. 它们之间存在的间距，是因为不同 div 之间存在默认间距，因为写代码的习惯，一个 div 元素结束之后，我们总会换行开始写代码，这一换行就是 div 之间存在间距的原因。

    所以解决办法很简单，a.去掉代码上不同 div 元素之间的换行或者空格即可，这个方法在代码可读性上有些不可取。如果你对代码格式有很严格的限制，像我一样是个无可救药的强迫症，你就选择下面的方法吧。b.利用注释将 div 之间的空格标记起来。c.网上还有人提到过一种解决方案，将 margin 设置为负值，这个方法也是可行的，但是由于浏览器之间的标准差异，margin 的设置可能会需要在不同浏览器中设置为不同的值，增加了工作的复杂度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="color-choice">
            <p>this is div 1.</p>
         </div><!--
         --><divclass="color-choice">
           <p>this is div 1.</p>
         </div><!--
         --><divclass="color-choice">
          <p>this is div 1.</p>
         </div>