Bagaimana untuk Menambah Padding pada Baris Teks dalam CSS?

Menambahkan Padding pada Baris Teks

Dalam artikel ini, kami akan meneroka cara menambah padding pada permulaan dan akhir setiap baris teks dalam bekas yang ditentukan.

Penyelesaian CSS

Walaupun nampaknya tiada penyelesaian CSS langsung, masalah ini telah berjaya ditangani menggunakan teknik CSS yang rumit. Di bawah ialah penyelesaian CSS yang diuji dengan baik yang berfungsi merentas pelbagai pelayar:

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

Struktur HTML

Struktur HTML hendaklah seperti berikut:

<div>

Atas ialah kandungan terperinci Bagaimana untuk Menambah Padding pada Baris Teks dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!