本文主要介绍五种快速去除HTML中内嵌块空白的方法，有兴趣的朋友可以参考一下

当您需要控制“内联”元素的边距和填充时，内联块属性值变得非常有用。有了它，你不再需要让这些元素“阻塞”和“浮动”。然而，有一个问题是，当使用内联块时，页面上会显示HTML元素之间的空白。真恶心。有几种方法可以消除这些差距；其中一个很聪明。

方法1:在每个元素之间不要留空白

解决这个问题的一个方法是在您的HTML代码中的元素之间不要留下空白：

保险商实验所

li项目内容/li

li项目内容/li

li项目内容/li

/ul

当然，它看起来很乱，使代码难以维护，但它实用、直观，更重要的是，它可靠。

方法2:在父元素上设置font-size:0

这个空白问题的更佳解决方案是在这些内嵌块元素的父元素上设置font-size:0。如果您在UL有一个直列式阻塞LI，您可以这样做：内嵌阻止列表{/* ulolowithsiclass */

font-size :0；

}。inline-block-listli{

font-size :14 px；/* puthefont-size back */

}

为了防止父元素的字体大小影响子元素，您需要重置子元素的字体大小值，这通常很简单。可能的麻烦是你设置相对大小的字体的时候。但是很多时候，这个方法可以解决你的问题。

方法3: html注释

这个方法有点暴力，但是也可以。用注释填充HTML元素，就像它们之间没有空白效果一样：

保险商实验所

liItemcontent/li！-

- liItemcontent/li！-

- liItemcontent/li

/ul

一句话.恶心。两个字.真恶心。三个字.….好吧，你懂的。但确实有效！

方法4:负边际

类似方法二，抱歉。您可以使用内嵌块的灵活性来设置负边距并隐藏空白：inline-block-listli{

margin-left :-4px；

}

这个方法是最不推荐的，因为你必须考虑各种情况，有时候会有一些意想不到的差距。更好不要那样做。

方法五：从头到尾接龙

使用HTML标记的另一种方法是将一个元素的结束标记和下一个元素的开始标记放在一起：

保险商实验所

li项目内容/li

li项目内容/li

li项目内容/li

/ul

没有HTML注释那么难看，但是我更喜欢手动删除那些空白，而不考虑代码的可读性。

没有一种方法是理想的，但是网页不留空白也是一种不好的方法。这并不是警告你不要使用内嵌块。inline-block仍然非常有用，但是您需要知道如何处理空白。

本文转载自中文网站