html - div 間の空白を削除する方法 (CSS グラフの作成)

Question

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;
}

Answer 1

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

白い場所は消えると確信していますが、境界線があるため、別の色になります. の両側から 1 ピクセルかかりますdiv。

の間には常にマージンがありますdiv。

Answer 2

CSSバーに追加margin:0;するだけで、グラフ間のスペースが削除されます..画像で確認できます...

Answer 3

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>