Maison >interface Web >tutoriel CSS >Comment ajouter un remplissage aux lignes de texte en CSS ?

Comment ajouter un remplissage aux lignes de texte en CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-06 19:09:03188parcourir

How to Add Padding to Lines of Text in CSS?

Ajout d'un remplissage aux lignes de texte

Dans cet article, nous explorerons comment ajouter un remplissage au début et à la fin de chaque ligne de texte dans un conteneur spécifié.

Solution CSS

Bien qu'il ne semble pas y avoir de solution CSS directe, ce problème a été résolu avec succès à l'aide de techniques CSS complexes. Vous trouverez ci-dessous une solution CSS bien testée qui fonctionne sur différents navigateurs :

#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;
}

Structure HTML

La structure HTML doit être la suivante :

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Formes - Défis CSSArticle suivant:Formes - Défis CSS