如何使用 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>
<p><strong>Penjelasan:</strong></p>
<ol><li>我们将文本包装在 <div> 中id 为“titleContainer”以包含整个文本。<li>我们将文本包装在 <h3> 中。标记并定义整个 <h3> 的样式以及嵌套的 <span>具有“标题”和“副标题”类的元素。</span>
</h3>
</h3>
</li>
<li>为了创建行分隔，我们创建另一个 <div>;在 <h3 id="内并使用行高-内边距-左边框和显示对其进行样式设置-这会在保持对齐的同时分隔行"> 内并使用行高、内边距、左边框和显示对其进行样式设置。这会在保持对齐的同时分隔行。</h3>
<li>我们将文本包裹在 <span> 中。使用“indent”类并使用position:relative和left:-15px将文本向左移动，在行的开头创建所需的填充。</span>
</li>
<li>具有“subhead”类的子文本是向左浮动并使用边距定位以确保正确对齐。</li>
<li>Internet Explorer (IE) 需要额外的样式来更正小标题文本的边距，该样式包含在条件注释中。</li>
<p>此 CSS 和 HTML 解决方案提供了一种灵活且跨浏览器兼容的方式，可以在每行文本的开头和结尾添加填充，如之前提供的 Chrome 屏幕截图所示。</p>
</div>
</li>
</div>
</li></ol>
</div>

以上是如何使用 CSS 和 HTML 在多行文本的边缘添加填充？的详细内容。更多信息请关注PHP中文网其他相关文章！