如何消除内联块列之间不必要的空格？

Question

如何消除内联块列之间不必要的空格？

3

我正在尝试使用CSS网格与以百分比设置的宽度（以便可以响应式地使用），并且不使用浮动（个人不喜欢！）。

在这种情况下，我正在使用csswizardry-grids并添加了适当的变量。您可以查看链接到GitHub页面的演示。

没有提到要分配网格宽度的“容器”类，因此我添加了.container（这也是csswizardry-grids演示中的内容），并具有max-width（为其他断点做准备）。容器具有左右填充，以允许.grid__item内的padding：left。

.container {
    margin: 0 auto;
    padding: 0 $gutter;
    max-width: 960px;
}

这是 scss：

.grid__item {
    display: inline-block;
    padding-left: 32px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desk--one-third { width: 33.333%; }

请注意，box-sizing:border-box属性只适用于csswizardry-grids.scss文件中指定的元素，其他元素不会受到影响。

我的标记：

<div class="container"> 
    <div class="grid">
        <div class="grid__item desk--one-third">
            <h1>Column 1</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 2</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 3</h1> 
        </div>
    </div>
</div>

问题：在 Firefox、Safari 和 Chrome 中，最后一个 .grid__item 会消失。

我看到的是：'.grid__item' 之间有一个神秘的间隙，至少有几个像素。请参见附图：

!(http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png)

有人能为我解释一下这个问题吗？

- Callum Flack

请问您能否为问题添加 grid__item 和 desk--one-third 的 CSS 样式？我假设这些列是 inline-block，尽管标题目前显示为 inline。 - Matt Coughlin

3个回答

1

当我搜索“inline之间的空格”时，这是第一个链接：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

简而言之，删除列之间的任何空格。

- MatTheCat

将父级的FontSize设置为0可以使您的代码更易读。 - V Maharajh

0

这个问题是由于inline-block元素被视为单词而引起的 - 因此可以通过给包装元素一个负的word-spacing来模拟。在Chrome/IE9/FF中，word-spacing: -4px;对我有效 :) - 但是请记住，这只是一个解决方法。

HTML：

<div class="wrapper">
    <div class="inliner">01</div>
    <div class="inliner">01</div>
    <div class="inliner">01</div>
</div>

CSS：

.inliner{ display: inline-block; }
.wrapper{ word-spacing: -4px; }

- jave.web

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Coughlin · Accepted Answer

行内块元素之间的空白

看起来您正在使用display: inline-block对列进行布局，而不是将它们浮动。

使用inline-block进行布局的问题在于：如果HTML源代码中在HTML标签之间有任何空格（在本例中为grid__item div），则显示的元素之间会添加3-4个像素的水平间距。

inline-block旨在将块内容添加到段落流中。产生此间距的原因与在段落中的两个单词之间添加3-4像素的原因相同：它为段落中的一系列内联元素提供了它们通常具有的间距量。

没有CSS解决方案可以真正跨浏览器和安全地实现这一点（尽管负左边距最接近）。有一些方法可以编辑HTML代码以防止这种情况发生（删除源代码中标记之间的空格），但它们会带来可维护性问题（存在高风险的难以识别的问题出现，当其他人处理代码时）并且它显着损害了内容和表现的分离（因为更改源代码的格式可能会影响显示页面的格式）。

行内块和浮动的比较

浮动和inline-block都有一个缺点，即它们并不适用于一般的布局（例如，在页面流中创建可变高度的列）。可以主张CSS定位和HTML表格也不适用于一般布局（或者至少不适合于它）。

每个的自然用途：

浮动：允许文本段落围绕元素流动（通常是图像）
inline-block：在段落中添加块内容（例如图像），作为段落的一部分
CSS定位：将一个元素覆盖在另一个元素上面（通常是弹出窗口或下拉菜单）
HTML表格：数据网格

历史上，由于缺乏其他选择，每种布局方式都被迫用于页面布局中。正如Eric Meyer 在这里和这里指出的那样，浮动被用于布局的原因是因为它可以清除浮动（这使得它可以以更多样化的方式使用）。

选择正确的工具

那么如果两者都不适用于一般布局，怎样才能选择最好的工具呢？

整体而言，反对使用inline-block的最有力的论据是，如果它真的适用于一般布局，就不会存在3-4像素的水平间距这样根本性的问题了（当布局页面的主要区域时，几乎从不需要这种间距 -- 列与文字段落中的单词应该不同）。

在特定情况下，可以应用一个简单的规则：对于那些3-4个像素的间距会成为问题的情况，这表明使用inline-block是不合适的。同样，对于那些不会产生问题的3-4个像素，这表明它可能是一个合理的选择。

在实践中，我发现浮动比inline-block更加可靠和可预测，特别是在早期版本的IE上。使用浮动的主要麻烦是必须手动清除它们。将可靠的clearfix添加到CSS文件中可以让这样做变得相对可管理。即使在现代CSS网格系统中，建立列的首选布局机制通常也是浮动（根据我目前的观察）。