Bagaimanakah saya boleh menambah padding pada tepi teks berbilang baris menggunakan CSS dan HTML?

Tambah Padding pada Tepi Teks Berbilang Baris Menggunakan CSS dan HTML

Untuk mencapai kesan ini tanpa menggunakan ruang tanpa pecah tag, kita boleh menggunakan gabungan CSS dan HTML. Begini caranya:

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. Kami membalut teks dalam a <div> dengan id "titleContainer" untuk mengandungi keseluruhan teks.
2. Kami membungkus teks dalam

   teg dan tentukan gaya untuk keseluruhan

   serta untuk elemen dengan kelas "tajuk" dan "subtajuk".

3. Untuk mencipta pemisahan baris, kami mencipta <div> dalam

   dan gayakannya dengan ketinggian garisan, pelapik, sempadan-kiri dan paparan. Ini memisahkan garis sambil mengekalkan penjajarannya.

4. Kami membalut teks dalam dengan kelas "indent" dan gunakan position: relative dan left: -15px untuk mengalihkan teks ke kiri, mencipta padding yang diingini pada permulaan baris.
5. Subteks dengan kelas "subhead" ialah terapung ke kiri dan diletakkan menggunakan jidar untuk memastikan penjajaran yang betul.
6. Internet Explorer (IE) memerlukan gaya tambahan untuk membetulkan jidar teks subtajuk, yang disertakan dalam bersyarat ulasan.

Penyelesaian CSS dan HTML ini menyediakan cara yang fleksibel dan serasi merentas penyemak imbas untuk menambah padding pada permulaan dan penghujung setiap baris teks, seperti yang ditunjukkan dalam tangkapan skrin daripada Chrome yang disediakan sebelum ini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah padding pada tepi teks berbilang baris menggunakan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!