How can I add padding to the edges of multi-line text using CSS and HTML?

Add Padding to the Edges of Multi-Line Text Using CSS and HTML

In order to achieve this effect without using non-breaking space tags, we can utilize a combination of CSS and HTML. Here's how:

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. We wrap the text in a <div> with an id of "titleContainer" to contain the entire text.
2. We wrap the text in an

   tag and define styles for the entire

   as well as for the nested elements with classes of "heading" and "subhead".

3. To create the line separation, we create another <div> within the

   and style it with line-height, padding, border-left, and display. This separates the lines while maintaining their alignment.

4. We wrap the text in a with the class "indent" and use position: relative and left: -15px to shift the text to the left, creating the desired padding at the beginning of the line.
5. The subtext with the class "subhead" is floated left and positioned using margins to ensure proper alignment.
6. Internet Explorer (IE) requires an additional style to correct the margin of the subhead text, which is included within conditional comments.

This CSS and HTML solution provides a flexible and cross-browser compatible way to add padding to the beginning and end of each line of text, as demonstrated in the screenshot from Chrome provided earlier.

The above is the detailed content of How can I add padding to the edges of multi-line text using CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!