Question

它不是一张桌子，我刚用过＆＃34; row＆＃34;缺乏一个更好的词。

我的问题是，我有一组display:inline-block元素和一个元素，但它们之间存在差距。请注意，我不是在谈论内联元素之间的空格，而是在谈论内联元素行与另一个元素之间的空间。我已经尝试了here提到的解决方案，设置了line-height和font-size，但这根本没有帮助（这就是为什么它没有下面的代码）

这是我的代码：

HTML

    <div id="letterhead">
        <div class="name"></div><div class="logo"></div><div class="name"></div>
        <div class="subtext"></div>
    </div>

CSS

body{
    background:#eee;
    width: 100%;
}
#letterhead {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 12rem;
    font: 32px Tahoma;
    color: #777;
    padding: 2rem;
}
    .logo {
        display: inline-block;
        width: 7rem;
        height: 7rem;
        background: #000;
    }
    .name {
        display: inline-block;
        height: 7rem;
        width: calc((100% - 7rem) / 2);
        background: #fff;
    }
    .subtext {
        //position: absolute;
        margin: 0;
        padding: 0;
        top: 9rem;
        text-align: center;
        width: 100%;
        height: 1rem;
        background: #555;
    }

我做了Fiddle here。

提前致谢。

Answer 1

但这是因为你的font-size和line-height。在#letterhead上将它们设置为0，不需要的空白区域将消失。如果你想把内容放在#letterhead的子节点上，你必须将字体大小和行高设置回来。

例如： http://jsfiddle.net/skeurentjes/69MkQ/1/

Answer 2

只需将margin:0 -4px 0 0添加到内联块div即可。一切都会好的。要删除行之间的空格，您必须设置vertical：align：top。查看 DEMO

<强> CSS

.logo {
        ...
        display: inline-block;
        margin:0 -4px 0 0;
        vertical:align:top
        ...
    }
    .name {
        ...
        display: inline-block;
        margin:0 -4px 0 0;
        vertical:align:top
        ...     
    }

内联块元素行与另一行之间的不需要的空间

2 个答案: