在CSS中使用<mark>进行填充

Question

我在尝试用以下html找出如何正确使用css中的padding功能时遇到麻烦，该HTML仅在左侧填充了第一个单词。

我现在无法正常使用的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;}

调用padding函数

我有什么方法可以分隔每个<mark></mark>部分的每个填充？

^ mark{padding right: 8px; padding-left 20px}时的样子 我正在尝试使每一行都像每个元素的第一个单词一样在左侧填充

通过使用更多的标记，我已经可以将其修复为右侧填充，但是在左侧，它仍然只是填充字符串中的第一个单词，而不是每个{{1}的开头}

我刚刚想到在上面的行上应用了填充，对于我以前对我想做的事情的较差的解释，我感到抱歉。

Answer 1

<mark>是一个def open_file(): try: fp = open(file, 'r') return fp except FileNotFoundError: fp = open('congress.txt','r') file = open('congress.txt', 'r') for line in file: print(line) 元素

inline元素尺寸未如实设置为直观长度，而是“环绕”内容。 inline-block and block元素将符合给定的尺寸（或多或少。）添加inline或display:inline-block。

演示

block

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

Answer 2

添加<br>解决了上述关于填充的问题，谢谢@Sabbin的帮助！

<h1 style="text-align: left;"><strong><mark>COMPREHENSIVE I.T. <br></mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></strong></h1>
    <h2 style="text-align: left;"><mark>Let us help you develop an I.T. <br></mark><mark> Optimization Strategy and <br></mark><mark> Define your technological<br></mark><mark> priorities</mark></h2>



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

Answer 3

<mark>默认是嵌入式元素。因此，每个<mark>块都在一行中呈现，因此在后续行中看不到填充。它在前一行的末尾添加了填充。

您可以通过多种方式解决此问题。

一种方法是将所有<mark>元素都浮动：离开所有元素，并添加clear：两者都使它们都位于另一个元素之下。

mark {
   /*your code*/
   float:left;
   clear:both;
}

其他方法是使<mark>元素成为块元素，但是它们将采用全宽。代码如下：

mark {
    /*your code*/
    display:block;
}

使用flex，您可以通过使用以下代码来实现相同目的：

mark {
    /*your code*/
    display: flex;
}

选择最适合您的东西。