如何使用 CSS 和 HTML 在多行文本的边缘添加填充？

使用 CSS 和 HTML 在多行文本的边缘添加填充

为了在不使用不间断空格的情况下实现此效果标签，我们可以利用 CSS 和 HTML 的组合。具体方法如下：

CSS:

#titleContainer {
    width: 520px;
}

h3 {
    margin:0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif;
}

h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

div {
    line-height: 1.1;
    padding: 1px 0;
    border-left: 30px solid #000;
    display: inline-block;
}

h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

h3 .indent {
    position: relative;
    left: -15px;
}

h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15;
}

HTML:

<div>

Penjelasan:

1. 我们将文本包装在 <div> 中id 为“titleContainer”以包含整个文本。
2. 我们将文本包装在

   中。标记并定义整个

   的样式以及嵌套的 具有“标题”和“副标题”类的元素。

3. 为了创建行分隔，我们创建另一个 <div>;在

   内并使用行高、内边距、左边框和显示对其进行样式设置。这会在保持对齐的同时分隔行。

4. 我们将文本包裹在 中。使用“indent”类并使用position:relative和left:-15px将文本向左移动，在行的开头创建所需的填充。
5. 具有“subhead”类的子文本是向左浮动并使用边距定位以确保正确对齐。
6. Internet Explorer (IE) 需要额外的样式来更正小标题文本的边距，该样式包含在条件注释中。

此 CSS 和 HTML 解决方案提供了一种灵活且跨浏览器兼容的方式，可以在每行文本的开头和结尾添加填充，如之前提供的 Chrome 屏幕截图所示。