How to Add Padding to Lines of Text in CSS?

Adding Padding to Lines of Text

In this article, we'll explore how to add padding at the beginning and end of each line of text within a specified container.

CSS Solution

Although there seems to be no direct CSS solution, this problem has been tackled successfully using intricate CSS techniques. Below is a well-tested CSS solution that works across various browsers:

#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 Structure

The HTML structure should be as follows:

<div>

The above is the detailed content of How to Add Padding to Lines of Text in CSS?. For more information, please follow other related articles on the PHP Chinese website!