两个跨度的背景色，需要用相同的颜色填充它们之间的空间

Question

https://codepen.io/Deepu55555/pen/YBQxYd

HTML

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span> <span>color</span> for only a part of a text.</p>

CSS

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

我有两个跨度并为两个跨度分配了背景色，是否有什么方法可以用与上一个相同的背景色来填充额外的空间？这样背景色就不会在两个跨度之间分开？

Answer 1

您可以在两个单词之间使用一个跨度，以便填充空格之间的颜色

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background color</span> for only a part of a text.</p>

Answer 2

希望您需要避免在“背景”和“颜色”之间留有空白。如果是这样，您可以使用父“ span”包装这两个“ span”元素。

<p>Set a <span>
<span>background</span> <span>color</span>    
</span> for only a part of a text.</p>

Answer 3

如果只是通过以下方式编写代码，则可以解决此问题：

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

如果您要处理静态数据，那么这将起作用，如果您还要处理动态数据，那么您也可以使用相同的表示法来管理空间。

---

编辑＃1：

或者代替以下行：

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

您可以使用以下内容：

<p>Set a <span>background color</span> for only a part of a text.</p>

---

编辑＃2：

将以下内容添加到CSS：

span::before{
  content: " ";
}

并更改以下行：

<p>Set a <span>background </span> <span>color</span> for only a part of a text.</p>

到（删除跨度之间的空间）：

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

然后，解决方案将如下所示：

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

span::before {
  content: " ";
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span><span>color</span> for only a part of a text.</p>

Answer 4

您也可以通过删除跨度之间的空间来做同样的事情

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span><span> color</span> for only a part of a text.</p>