块元素、行内块和内联元素_删除内联块元素之间的空格-白红宇

块元素、行内块和内联元素

I remember being a young developer during the Internet Explorer 6 days and desperately wanting IE to adopt display: inline-block. The inline-block value is incredibly useful when wanting to control margin and padding on "inline" elements without the need to `block and float` them. One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen. Gross. There are a few ways to remove that space; some of them are just as gross, one is reasonably nicer.

我记得在Internet Explorer的6天中还是一名年轻的开发人员，他非常希望IE采用display: inline-block 。当想要控制“ inline”元素的边距和填充而无需“阻塞和浮动”它们时， inline-block值非常有用。使用inline-block时出现的一个问题是HTML中的空格变成了屏幕上的可视空间。毛。有几种方法可以删除该空间。其中一些与总毛额相同，其中一个相对较好。

解决方案0：元素之间没有空间 (Solution 0: No Space Between Elements)

The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

此问题的唯一100％解决方案是不要在HTML源代码中的那些元素之间放置空格：


    
     Item content
     Item content
     Item content

Of course this is a mess to maintain but it's practical, logical, and most importantly...reliable.

当然，这很麻烦，但是它是实用，合乎逻辑的，而且最重要的是……可靠。

解决方案1：字体大小：父级为0 (Solution 1: font-size: 0 on Parent)

The best white-space solution is to set a font-size of 0 on the parent to the inline block elements. So if you had a <UL> with inline-block <LI>'s, you'd do this:

最佳的空白解决方案是将内联块元素的父级上的font-size设置为0 。因此，如果您有带有内联块<LI>的<UL>，则可以这样做：

.inline-block-list { /* ul or ol with this class */	font-size: 0;}.inline-block-list li {	font-size: 14px; /* put the font-size back */}

To counteract the parent font-size setting, you must set a font-size for the list items, but that's usually fairly simple. The only time it wouldn't be simple is if you're in a wicked cascade of relative units you can't easily calculate. In most cases, however, this will be exactly what you need. Update: unless you care to support Android WebKit.

要抵消父font-size设置，您必须为列表项设置字体大小，但这通常很简单。唯一一次不简单的是，如果您处于相对单位的邪恶级联中，则无法轻松计算。但是，在大多数情况下，这正是您所需要的。 更新：除非您愿意支持Android WebKit。

解决方案2：HTML注释 (Solution 2: HTML Comments)

This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:

此解决方案有点黑帮，但也可以。使用HTML注释作为元素之间的间隔符就像在元素之间不留空格一样：


    	
     Item content
     
     Item content
     
     Item content

In a word...gross. In two words...really gross. In three words...well, you get it. But it works!

一言以蔽之。用两个词...真的很累。用三个词...嗯，你明白了。但这有效！

解决方案3：负保证金 (Solution 3: Negative Margin)

Much like solution two, this is regrettable. You can take advantage of inline-block's flexibility to use a negative margin to negate the space:

很像解决方案二，这很遗憾。您可以利用内联块的灵活性来使用负边距来抵消空间：

.inline-block-list li {	margin-left: -4px;}

This is the worst solution because you have to account for variable, sometimes unpredictable spacing. Avoid at all costs.

这是最糟糕的解决方案，因为您必须考虑可变的，有时是不可预测的间距。不惜一切代价避免。

解决方案4：降低闭合角度 (Solution 4: Dropping Closing Angle)

Another HTML-based hack solution is to simply place the closing > next to the start of the next tag:

另一个基于HTML的黑客解决方案是，只需在下一个标记的开始位置旁边放置“>”即可：


    	
     Item content
     Item content
     Item content

Not as ugly as the HTML comment hack but I know I'd probably remove that whitespace and not think about why it was there originally.

不像HTML注释hack那样丑陋，但我知道我可能会删除该空格，而不去想为什么它原来在那里。

None of these solutions are ideal but the only alternative is not spacing/indenting your HTML which is also a crap solution. This isn't a "be careful what you wish for scenario" because inline-block is still incredibly useful, but it is important that developers know how to deal with the space that comes with using it.

这些解决方案都不是理想的解决方案，但唯一的替代方案不是不对HTML进行间距/缩进，这也是一种废话解决方案。这并不是“请小心您对方案的期望”，因为inline-block仍然非常有用，但是重要的是，开发人员必须知道如何处理使用它所带来的空间。

翻译自:

块元素、行内块和内联元素