Question

如何删除div块周围的空白块？我的代码如下：

HTML：

<div class="accordion">
    <div class="accordionitem horizontal"></div>
    <div class="accordionitem vertical"></div>
    <div class="accordionitem vertical"></div>
</div>

CSS：

html {
    margin: 0px;
    padding: 0px;
}
.accordion {
    width: 100%;
}
.accordionitem {
    display: inline-block;
    background-color: green;
       padding:0;
    margin:0;
}
.vertical {
    width: 10%;
    height: 100px;
}
.horizontal {
    width: 80%;
    height: 100px;
}

样本：

http://jsfiddle.net/PqkGh/2/

Answer 1

使用：

 .accordion {font-size:0px; }

这是因为display：inline-block;让DIV表现得很好像内联元素（如单词之间的空格）

Answer 2

您需要删除div之间的空格

http://jsfiddle.net/PqkGh/3/

<div class="accordion">
    <div class="accordionitem horizontal"></div><div class="accordionitem vertical"></div><div class="accordionitem vertical"></div>
</div>

为了更好的可读性，你可以做到

<div class="accordion">
    <div class="accordionitem horizontal">
    </div><div class="accordionitem vertical">
    </div><div class="accordionitem vertical">
    </div>
</div>

Answer 3

内联块倾向于添加这些空格，因为它会拾取标记之间的空格/文本（包括新行）。要删除这些白色步调，请注释DIV之间的区域，如此

<div class="accordion">
    <div class="accordionitem horizontal"></div><!--
    --><div class="accordionitem vertical"></div><!--
    --><div class="accordionitem vertical"></div>
</div>

Answer 4

您还可以从CSS中删除display: inline-block并添加float: left：

.accordion: after {
    clear: both;
}

.accordionitem {
    background-color: green;
    float: left;
}

Fiddle

Answer 5

您可以通过多种方式完成此操作

1. .accordion {font-size:0px; }

2.  .accordionitem{margin-right: -4px;}

3.  <div class="accordion">
        <div class="accordionitem horizontal"></div><!--
        --><div class="accordionitem vertical"></div><!--
        --><div class="accordionitem vertical"></div>
    </div>

reference link

删除div块之间的空白区域

5 个答案: