如何在 CSS 中为文本行添加填充？

向文本行添加内边距

在本文中，我们将探讨如何在每行的开头和结尾添加内边距指定容器内的文本。

CSS解决方案

虽然似乎没有直接的 CSS 解决方案，但已经使用复杂的 CSS 技术成功解决了这个问题。下面是一个经过充分测试的 CSS 解决方案，适用于各种浏览器：

#titleContainer {
    width: 520px;
}

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

/* Styling for main text line */
h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

/* Styling for subhead line */
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

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

/* Positioning of main text line */
h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

/* Indentation for subhead line */
h3 .indent {
    position: relative;
    left: -15px;
}

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

HTML 结构

HTML 结构应如下所示：

<div>

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