使用CSS删除内联块元素之间的空白(Gap) _Gap

本文概述

1.删??除HTML标记之间的空格
2.使用注释删除HTML标记之间的空格
3.使用负边距
4. Monkeypatch父字体大小为0

【使用CSS删除内联块元素之间的空白(Gap)】你是否正在尝试使用内联块显示模式使用自己的CSS规则创建内联网格？可能是你感到沮丧, 并问自己：” 为什么我的元素之间有空间！” 。即使你的CSS可能非常简单, 但在显示的HTML元素之间始终会有一个空格：内联块样式。考虑以下代码段：

< div class="header"> < div class="head-item"> 1< /div> < div class="head-item"> 2< /div> < div class="head-item"> 3< /div> < div class="head-item"> 4< /div> < div class="head-item"> 5< /div> < /div> < style> .head-item {width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; }< /style>

已经想像它会是什么样子？好吧, 以正常的CSS想象力, 我们的期望是：

文章图片
但是, 你将获得以下结果：

文章图片
如果你也没有注意到它, 则每个带有head-item类的div之间都有一个空格(第二行中用图像编辑器以蓝色突出显示)。根据我们的样式, 我们有50× 50的简单块, 其文本居中且边框为灰色。那是什么问题即使在没有其他CSS规则的环境中执行的标记也始终会在每个带内嵌块的div之间显示间隙。这本身不是错误, 而是使用display：inline-block的元素的预期行为。
如果目标是创建一个内联div组, 则轻松解决此问题的方法是将类的float属性设置为left：

.head-item {float: left; width: 50px; height: 50px; text-align: center; border: 1px solid gray; }

这将立即产生我们想要的网格。但是, 这在你的情况下可能没有用, 并且可能无法与其他样式一起使用。在本文中, 我们将与你分享可能针对此问题在项目中应用的解决方案。
1.删??除HTML标记之间的空格解决此问题的第一个也是最广为人知的解决方案是修剪具有display：inline-block属性的HTML元素之间的每个空格, 例如, 如果我们删除初始标记的空格, 则现在可以：

< div class="header"> < div class="head-item"> 1< /div> < div class="head-item"> 2< /div> < div class="head-item"> 3< /div> < div class="head-item"> 4< /div> < div class="head-item"> 5< /div> < /div>

先前的markdown(相同, 但html标记之间没有空格)将成功在没有空格的行上显示我们期望的div结果：

文章图片
如你所见, 我们不需要添加额外的样式, 而只需删除元素之间的空格。如果你想使用此解决方案, 则可能是不想与其他程序员讨论代码的混乱程度, 那么你可能希望通过使用服务器语言(例如PHP)来做到这一点：

< ?php$html = $text = < < < EOT< div class="header"> < div class="head-item"> 1< /div> < div class="head-item"> 2< /div> < div class="head-item"> 3< /div> < div class="head-item"> 4< /div> < div class="head-item"> 5< /div> < /div> EOT; $html = preg_replace('/(\> )\s*(\< )/m', '$1$2', $html); echo $html;

2.使用注释删除HTML标记之间的空格从理论上讲, 该解决方案与第一个解决方案相同, 但是你无需在一行中放下Markdown, 而是从元素结束处打开注释, 并在下一个元素开始处关闭注释。

< div class="header"> < div class="head-item"> 1< /div> < !----> < div class="head-item"> 2< /div> < !----> < div class="head-item"> 3< /div> < !----> < div class="head-item"> 4< /div> < !----> < div class="head-item"> 5< /div> < /div>

3.使用负边距第三种解决方案非常简单, 但是也可能导致不良结果。由于div之间存在间隙, 因此可以通过在元素上使用负的margin属性将其删除：

< div class="header"> < div class="head-item"> 1< /div> < div class="head-item"> 2< /div> < div class="head-item"> 3< /div> < div class="head-item"> 4< /div> < div class="head-item"> 5< /div> < /div> < style> .head-item {width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; }.head-item:not(:first-child) {margin-left: -4px; }< /style>

4. Monkeypatch父字体大小为0 最后一种方法包括一个奇怪的修改, 可能不是你项目的最佳选择。此解决方案与内联块元素的容器的字体大小有关, 在这种情况下, 你需要将容器的字体大小设置为0(字体大小为0的空格等于宽度为0的元素), 然后指定子元素的字体大小。在示例标记的情况下, 我们需要使用以下值修改header和head-item类：

< div class="header"> < div class="head-item"> 1< /div> < div class="head-item"> 2< /div> < div class="head-item"> 3< /div> < div class="head-item"> 4< /div> < div class="head-item"> 5< /div> < /div> < style> .header {/* Set container font-size */font-size: 0; }.head-item {width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; /* Force font-size of child elements */font-size: 16px; }< /style>

这也将解决我们的问题。在某些情况下, 使用哪种方法完全取决于你的内联块, 这确实有用, 但是, 了解如何处理该烦人的差距或学习如何忍受它也很重要。
编码愉快！