显示内联块和水平堆叠时如何摆脱div之间的空间？ [英] How to get rid of space between divs when display inline-block and stacked horizontally?

问题描述

我有三个div水平堆叠在一起，这些div设置为显示：inline-block。但是，我注意到，即使使用某种CSS重置，他们产生一个小的4px之间的距离？为什么会发生这种情况？有没有办法全球摆脱这种情况发生或者我只需要把divs移到左边-4px？

解决方案

这是由于你的浏览器会渲染DIV的内联和单词，它们之间用空格分隔。

font-size，因此一个简单的技巧是将包含元素的字体大小设置为0，然后在内联div中重置字体大小。

  #container {font-size：0; } 
 
 #container> div {font-size：1rem; display：inline-block; } 
  

我在这小提琴。

请看这个文章了解更多信息。

I have three divs horizontally stacked side by side to one another and these divs are set to display: inline-block. However, I have noticed that even with using some sort of CSS reset they produce a small 4px distance between each other? Why does this occur? Is there a way to globally get rid of this from happening or do I just have to shift the divs to the left -4px?

解决方案

This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces.

The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.

#container {   font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

I have demonstrated this in this Fiddle.

Take a look at this article for more info.

这篇关于显示内联块和水平堆叠时如何摆脱div之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！