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

本文概述

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

你是否正在尝试使用内联块显示模式使用自己的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>

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

编码愉快！