如何删除 div 之间的空白（CSS 图形创建）答案

【问题标题】：how to remove white space between divs (CSS graph creating)如何删除 div 之间的空白（CSS 图形创建）
【发布时间】：2013-11-20 11:33:00
【问题描述】：

我已经使用 CSS 创建了一个图表，但是我在内部 div（条形类）方面遇到了一些问题。内部 div 之间有空格。我尝试过使用 float: left。它可以去除空白，但内部div不与外部div（图形类）的底部相邻。

这是一个示例链接（仍然没有删除空格）：http://dabblet.com/gist/2779082
谢谢

HTML

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}

.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}

【问题讨论】：

是的，它的作品。我想知道我必须在关闭和打开 div 标签之间添加 html cmets 标签。

标签： html css

【解决方案1】：

添加

.bar {
    padding:0;
    margin:0;
 }

【讨论】：

【解决方案2】：

.bar {
    padding:0;
    margin:0;
 }

我很确定白色的地方会消失，但因为边框会变成另一种颜色。从您的div 的每一侧需要 1px。

您的div 之间总会有一个边距。

【讨论】：

【解决方案3】：

将padding: 0px; 添加到您的.graph

【讨论】：

【解决方案4】：

只需将margin:0; 添加到您的条形 css 中，图表之间的空格就会被删除。您可以在图像中看到它...

【讨论】：

【解决方案5】：

您需要真正删除 div 之间的空格，请尝试以下操作而不是

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

完全一样，div之间没有空格

<div class="graph">
    <div style="height: 22px;" class="bar"/>
    <div style="height: 11px;" class="bar"/>
    <div style="height: 6px;" class="bar"/>
    <div style="height: 49px;" class="bar"/>
    <div style="height: 28px;" class="bar"/>
</div>

【讨论】：

【解决方案6】：

我想这个问题的回复有点太晚了，但答案可能会帮助遇到同样问题的其他人。

其实我不是在回答这个问题，答案在下面的链接中。

Why is there an unexplainable gap between these inline-block div elements?

【讨论】：