时间戳

首页 > 解决方案 > 使用填充在 CSS 中

html - 使用填充在 CSS 中

问题描述

我在试图弄清楚如何正确使用 css 中的填充功能和以下 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;}

有什么方法可以将每个<mark></mark>部分的填充分开吗？

在此处输入图像描述

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

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

我刚刚想到在上面的行上应用了填充，对于我之前对我正在尝试做的事情的糟糕解释，我感到很抱歉。

标签： htmlcss

解决方案

<mark>是一个inline元素

inline元素尺寸没有忠实地设置为直观的长度——它们“包裹”在内容周围。inline-block和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>

推荐阅读