Bagaimana untuk Menambah Padding pada Permulaan dan Penghujung Setiap Baris Teks dalam Span Berbilang Baris?

Tambahkan Padding di Permulaan dan Penghujung Setiap Baris Teks

Latar Belakang

Dalam senario ini, rentang menjangkau berbilang baris dengan latar belakang warna. Pengguna menginginkan padding 10px pada penghujung setiap baris, tetapi mengelak daripada memasukkan tag nbsp secara manual. Penyelesaian CSS atau JavaScript lebih diutamakan.

Penyelesaian CSS

Dalam IE8 dan versi Chrome, Firefox, Opera dan Safari yang lebih baru, kod CSS dan HTML berikut menyediakan penyelesaian kreatif:

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

Teknik ini mencipta berbilang div untuk setiap baris, dengan pelapik dan sempadan padat di sebelah kiri. Dalam setiap div, elemen h3 sebaris meletakkan teks. Subtajuk diapungkan ke kiri untuk mengalih keluar sempadan dan menambah ketinggian baris.

Pertimbangan

Penyelesaian ini rumit dan mungkin menghadapi masalah dalam penyemak imbas tertentu. Walaupun ia memberikan anggaran visual bagi padding yang diingini, ia mungkin tidak sempurna dalam semua kes.

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