没有边距的内联块？ [英] Inline-Block without margins?

问题描述

我有几个DIV显示为内联块;并且他们似乎在浏览器之间自动应用间隔。他们有margin / padding设置为0.有没有办法纠正这个没有使用负边距？

I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?

推荐答案

你看到的实际上是空格。这就是为什么删除paddings和边距什么也没有。让我解释。具有此项时：

Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:

HTML

<div>
    a
    a
    a
    a
</div>

这是如何呈现的：

a a a a

...对吗？

所以，如果你有这样：

<div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
</div>

...你会得到同样的东西：

...you'll get the same thing:

block [space] block [space] block

现在...这个问题有很多不同的解决方案。我相信最常见的是注释html中的空格：

Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:

   <div>
        <div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div>
   </div>

我不喜欢它 - 我更喜欢保持html尽可能干净。我的首选方法是将父级的font-size设置为0，然后在inline-blocks自身上设置所需的字体大小。像这样：

I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:

div {
    font-size: 0; /* removes the whitespace */
}

div div {
    display: inline-block;
    font-size: 14px;
}

这篇关于没有边距的内联块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！