内联块 DIV 元素之间的额外空间 [重复]

Posted

技术标签:

【中文标题】内联块 DIV 元素之间的额外空间 [重复]【英文标题】:Extra Space Between inline-block DIV Elements [duplicate] 【发布时间】:2013-12-18 14:30:29 【问题描述】:

我正在使用 CSS 列布局模块创建一个流畅的布局,当 2 个或更多元素位于同一列的“行”中时,我看到了意想不到的结果。元素之间将出现 3 到 4 px 的间隙。我在 IE11、FireFox 24、Chrome 31 和 Safari 5.1.7 中进行了测试,它们都表现出相同的行为。

<div class="tile-container">
    <div class="tile-large">1</div>
    <div class="tile-wide">2</div>
    <div class="tile-small">3</div>
    <div class="tile-small">4</div>
    <div class="tile-small">5</div>
    <div class="tile-small">6</div>
    <div class="tile-wide">7</div>
    <div class="tile-large">8</div>
</div>

.tile-container 
    -moz-column-width: 250px;
    -webkit-column-width: 250px;
    column-width: 250px;
    column-fill: auto;
    height: 502px;
    background-color: gray;


.tile-large 
    width: 250px;
    height: 250px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: green;


.tile-wide 
    width: 250px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: blue;


.tile-small 
    width: 125px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: red;

我不想开始使用负边距来缩小差距,因为我想引入拖放行为。向左浮动将消除差距,但这会带来另一组问题。奇怪的是,当我使用 jQueryUI 可排序时,在 drop 事件和 jQueryUI 排列元素之后,差距不再存在。

【问题讨论】:

边距/填充/边框? 这是您的行内块元素之间“不可见”间距的结果。如果要删除 div 之间的换行符,也会删除空格。请参阅副本了解一些常见的解决方法。 @TravisJ 感谢您的帮助,您链接的那篇文章是正确的。 -1 *** 上有大约 100 个关于这个问题的问题。这是你可以做的,css-tricks.com/fighting-the-space-between-inline-block-elements。 【参考方案1】:

你需要注释掉元素之间的空白,像这样:

<div class="tile-container">
       <div class="tile-large">1</div><!--
    --><div class="tile-wide">2</div><!--
    --><div class="tile-small">3</div><!--
    --><div class="tile-small">4</div><!--
    --><div class="tile-small">5</div><!--
    --><div class="tile-small">6</div><!--
    --><div class="tile-wide">7</div><!--
    --><div class="tile-large">8</div>
</div>

演示:http://jsfiddle.net/P7cbA/11/

另一种方法是将html中的元素放在一行中,它们之间没有任何空格,但这会降低代码的可读性:

<div class="tile-container">
       <div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>

【讨论】:

不错的建议。这在任何重复的答案中都没有提出。 +1 独特性 @Arbel 你太棒了,谢谢。 @RobJacobs 很高兴为您提供帮助!【参考方案2】:

您会看到 div 元素之间的空白。从 HTML 中删除空格,或将容器的字体大小设置为零,这样空格就不会被渲染。

.tile-container 
    font-size: 0

.tile-container > div 
    font-size: 14px; /* Or whatever you like. */

【讨论】:

我想我更喜欢这个解决方案,因为 css-tricks.com 的建议说负边距值取决于父级的字体大小。【参考方案3】:

这个问题是在inline-block 元素之间生成的white-space。避免这种情况的一种方法是添加负边距:

.tile-large, .tile-wide, .tile-small 
  display:inline-block;
  margin-right:-4px;

该值可以根据父字体大小改变

演示http://jsfiddle.net/P7cbA/7/

删除那个空间有更多选项选择最适合您的口味,您可以查看一篇好文章http://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】:

以上是关于内联块 DIV 元素之间的额外空间 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

3个内联块的。我需要中间的一个来包围第一个额外的线

如何摆脱div元素中svg下方的额外空间

在列表中找到 k 个不重复的元素,额外的空间“很少”

两个内联块 <span> 元素之间的间隙 [重复]

CSS:LI元素之间的额外间隙[重复]

图像容器元素不需要的额外高度[重复]