同一行上的元素不会导致按钮 CSS 之间出现空格答案

【问题标题】：Element on same line not causing space to appear in between buttons CSS同一行上的元素不会导致按钮 CSS 之间出现空格
【发布时间】：2017-07-21 07:49:28
【问题描述】：

谁能解释这种奇怪的行为，为什么在按钮之间添加额外的间距。

案例-

以下是 HTML 代码，如果这样写，它会在按钮之间添加额外的空间 -

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button>
        <button class="btn two">Second long button with a long text length</button>
    </div>

输出 -

但是如果我这样写，那么就没有空间了-

代码 -

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button>
    </div>

输出 -

CSS 代码 -

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  padding: 10px;
}

.btn {
  font-size: 14px;
  line-height: 28px;
  background: #FFFFFF;
  border: 1px solid #C3C3C3;
  position: relative;
  padding: 10px;
  display: inline;
}

.btn:before {
  content: "";
  position: absolute;
  width: 4%;
  height: 5px;
  background: #FFF;
  right: 0px;
  top: -5px;
}

.two {
  display: inline;
}

【问题讨论】：

标签： html css whitespace

【解决方案1】：

使用内联元素，换行符（和多个空格）被转换为 1 个空格。

【讨论】：

【解决方案2】：

您可以做几件事来消除元素之间的空白；但这取决于所使用的元素类型和浏览器的 html 渲染引擎。

这里有一些适用于“空白”问题的方法，但请记住，最终您希望您的代码看起来整洁。

很好的解决方案 .: 没有空格和聪明的 CSS
为大多数主流浏览器编写没有空格的 HTML 肯定会解决这个问题，但它会使您的代码难以辨认；但是，您可以通过 HTML 预处理器（如 PHP）和 minify 运行您的代码，然后再将其提供给浏览器。对于速度问题，这似乎“愚蠢”，但是如果您可以在预处理器中巧妙地“配置”项目，以便在“开发”模式下将源代码“烘焙”（缩小）为单独的文件；并且仅在“实时”模式下“提供”缩小代码。

如果您更喜欢“预处理器”选项，请查看：how to minify html code

在您的 CSS 中，注意不同元素在浏览器中的呈现方式。
使用“block-type”和“view-port”元素，将它们包装在您可以控制的其他元素中；因为将这些样式设置为显示inline 可能会导致问题，因此为什么这些 CSS 值是：display:inline-block，但这并不是 100% 保证看起来像预期的那样。

仅 HTML .：cmets 和奇怪的闭合角放置 .：丑陋但有效

<button>one</button><!--
--><button>two</button>

<button>one</button
><button>one</button>

仅 CSS .：字体大小在父级上为零，位置和边距一致
如果你使用font-size:0px，那么你必须对你的CSS选择器很聪明。为所有元素强制使用标准边距/填充是保持一致性的好主意：

body{font-size:0px;}
p,b,i,a,span{font-size:16px;}
div,svg{position:relative; box-sizing:border-box; margin:0px;}

【讨论】：

【解决方案3】：

\n 是 html 中的合法字符，它只是不返回行。例如，您可以通过将 font-size:0 添加到按钮的容器来解决它，因为按钮具有 font-size:14px。

div.wrapper { font-size:0 ; }

请注意包装器中的其他元素，这些元素将从您的 font-size:0 继承。或者：你可以写在同一行... :)

【讨论】：