html - 在 css 中使用 <mark> 填充

Question

我在尝试弄清楚如何使用以下 html 正确使用 css 中的填充功能时遇到问题，它只填充左侧的第一个单词。

我现在使用的 css 不能正常工作是

mark {
  background-color: #89ce40;
  color: white;
  opacity: 0.89;
  padding-right: 5px;
  padding-left: 10px;
}

<div class="slide-content">
  <h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></span></strong></h1>
  <h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>

我还尝试通过 .slide-content{padding-left: 10px;} 调用填充函数

有什么方法可以通过每个 <mark></mark> 来分隔每个填充？部分？

^ 这是 mark{padding right: 8px; padding-left 20px} 时的样子 我试图让每一行都像每个元素的第一个单词一样在左边填充

我已经能够通过使用 mark more 来修复右侧填充，但在左侧，它仍然只是每个字符串中的第一个单词被填充，而不是每个 <mark> 的开头。

我刚刚想到在上面的行上应用了填充，对于我之前对我正在尝试做的事情的解释不力，我深表歉意。

Answer 1

<mark> 是一个 inline元素

inline 元素尺寸没有忠实地设置为直观的长度——它们“环绕”在内容周围。 inline-block and block 元素将符合给定的尺寸(或多或少。)添加 display:inline-block或 block .

演示

mark {
  display:inline-block;
  background-color: #89ce40;
  color: white;
  opacity: 0.89;
  padding-right: 5px;
  padding-left: 10px;
}

<div class="slide-content">
  <h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark></span></strong></h1>
  <h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>