如何删除div之间的空白区域(CSS图形创建)

时间:2013-11-08 12:41:10

标签: html css

我使用CSS创建了一个图形但是我遇到了一些内部div(bar类)的麻烦。内部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;
}

6 个答案:

答案 0 :(得分:2)

添加

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

答案 1 :(得分:1)

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

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

div之间总是存在差距。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

只需将margin:0;添加到您的栏目css中,您的图表之间的空格就会被移除。您可以在图片中看到它......

enter image description here

答案 4 :(得分:0)

您需要删除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>

答案 5 :(得分:0)

我想这个问题的回复有点太迟了,但答案可能会帮助那些遇到同样问题的人。

事实上我没有回答这个问题,答案在下面的链接中。

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