CSS使用显示问题：内嵌块

我已经设置了4个div的所有宽度：120px放置在240px宽的包装内。CSS使用显示问题：内嵌块

的jsfiddle这里 - http://jsfiddle.net/s7dxxro0/1/

HTML：

<div id="wrapper"> 
    <div class="primary-content-block" id="about"> 
    </div> 
    <div class="primary-content-block" id="gallery"> 
    </div> 
    <div class="primary-content-block" id="contact"> 
    </div> 
    <div class="primary-content-block" id="news"> 
    </div> 
</div>

CSS：

#wrapper { 
margin:0 auto; 
width: 240px; 
} 

.primary-content-block { 
display:inline-block; 
vertical-align:top; 
width: 120px; 
height: 120px; 
} 

#about { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#gallery { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#contact { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#news { 
background: radial-gradient(#5cc4ba, #00aa99); 
}

然而，要素彼此相邻不显示由于微弱的差距被应用到我的4块。

这似乎是一个保证金来自哪里？我如何删除它？

这工作时，我使用float：留在原地显示：inline-block的，但我宁愿不使用浮动的原因有很多

来源

2014-09-12 ocajian

添加浮动：左;并增加容器的宽度，如果它不够宽 – davidcondrey 2014-09-12 09:58:36

你的代码工作在这里检查'http：// jsfiddle.net/s7dxxro0/4 /' – Amit 2014-09-12 09:59:05

你可以尝试[this]（http://jsfiddle.net/s7dxxro0/3 /），因为换行符会在您的方框之间添加空格。 – Paul 2014-09-12 09:59:11

这是因为您的内联块之间有空格。元素之间用空格分开（不幸的是，新行也会计算在内），所以浏览器在它们之间放置一个空格，就好像它们是单词一样。

有几种方法可以解决这个问题。

把html标签一边到另一边：

<div class="primary-content-block" id="about"> 
</div><div class="primary-content-block" id="gallery"> 
</div><div class="primary-content-block" id="contact">

使用了div阴性切缘：

.primary-content-block { 
    margin-right: -4px; 
}

将字体大小设置为0：

#wrapper { 
    font-size: 0; 
} 
#wrapper > div { 
    font-size: 12px /* or whatever it was before */ 
}

还是在<p>元素的情况（不是divs，不幸）只是省略了结束标记：

<p class="primary-content-block" id="about"> 
<p class="primary-content-block" id="gallery">

来源：css-tricks

来源

2014-09-12 10:04:41 isogram

我认为负边际是一个不好的解决方案，因为你无法知道这个空间是完全正确的4PX。其他的解决方案都很好，所有这些解决方案都可以工作。 – GolezTrol 2014-09-12 10:07:49

@GolezTrol - 你通常在上下文中知道你需要什么负值。它并不总是4px，但这是一种罕见的情况，px或em中的正确负边界不能被选择。 – Alohci 2014-09-12 10:13:06

我同意Golez，这不是一个完美的解决方案，但我想完成。我不喜欢font-size方法，因为它会中断'em'继承。 – isogram 2014-09-12 10:22:34

这件事是通过换行我的div

到修复之间引起将是：

<div id="wrapper"> 
    <div class="primary-content-block" id="about"></div><div class="primary-content-block" id="gallery"></div><div class="primary-content-block" id="contact"></div><div class="primary-content-block" id="news"></div> 
</div>

来源

2014-09-12 10:02:37 ocajian

你可以简单的附加浮动：左股利

.primary-content-block { 
    /* display:inline-block; */ 
    vertical-align:top; 
    width: 120px; 
    height: 120px; 
    float: left; 
}

这样http://jsfiddle.net/s7dxxro0/10/

来源

2014-09-12 10:05:14 Muhammed

这不是一个 “错误”（我不认为）。它只是设置线条上的元素的方式。这些块之间的空间就像单词之间的空格。可以快速移动的元素回到与余量的负4像素位置（可能需要基于母体的字体大小进行调整）

.primary-content-block { 
    display:inline-block; 
    vertical-align:top; 
    width: 120px; 
    height: 120px; 
}

来源

2014-09-12 10:05:22 Danis

CSS使用显示问题：内嵌块

回答

相关问题