0

我创建了一个包含三篇文章的部分，我想知道为什么文章之间有边距/填充：

在此处输入图像描述

我的html：

<section id="home">

 <article>
<h1>Übersicht</h1>
 </article>
 <article>
<h1>Leute</h1>
 </article>
 <article>
<h1>Links</h1>
 </article>

 </section>

我的CSS：

section { width: 87%;
    margin: 0px auto;
     }

article {
    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}
4

5 回答 5

1

尝试用块替换 inline-block 并使用float:left请看这个小提琴

JSFIDDLE EXAMPLE

于 2013-10-13T16:13:40.723 回答
1

元素之间有空格。display:inlin-block只需删除它们，例如：

<section id="home">
    <article><h1>Übersicht</h1></article><!--
    --><article><h1>Leute</h1></article><!--
    --><article><h1>Links</h1></article>
</section>

或者：

<section id="home">
    <article><h1>Übersicht</h1></article><article><h1>Leute</h1></article><article><h1>Links</h1></article>
</section>

JSFiddle

或添加font-size:0;到父容器，例如。

于 2013-10-13T16:13:51.500 回答
1

任何两个inlineorinline-block元素都在它们之间使用空格呈现，即使您在标记中有多个空格/换行符将它们分开。

例如，这 3 个 div 将全部呈现hello world：

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

发生这种情况是因为文本节点是inline.

在您的情况下，您需要确保<article>在上一次关闭之后立即打开</article>：

<section id="home">
 <article>
<h1>Übersicht</h1>
 </article><article>
<h1>Leute</h1>
 </article><article>
<h1>Links</h1>
 </article>

 </section>

jsFiddle

以上面的例子为例，这里你不需要hello world，你想要helloworld，所以只需删除标记中这两个单词之间的任何空格。

于 2013-10-13T16:14:30.050 回答
1

空格由您的浏览器自动添加。

一个被广泛接受的解决方法是添加font-size:0到父容器，然后为子元素添加合理的字体大小

在你的情况下，你会这样做：

section {
    font-size: 0;     //Must be zero
}

article {
    font-size: 10px;  //can be anything you want

    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}
于 2013-10-13T16:20:02.783 回答
0

显示内联块正是它的本质。具有块属性的内联元素。话虽如此，如果元素之间有空格/换行符，它将增加一个间隙。

我建议在这种情况下使用 display: block 和 float: left。此方法还增加了对旧浏览器的支持。如果您更喜欢使用 inline-block，请删除空格，以便元素的结束标记和开始标记直接相邻。

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

于 2013-10-13T16:09:55.230 回答