Tutorial CSS / Mengatur Paragraf dan Daftar dengan CSS

CSS mengatur perataan paragraf, indentasi, spasi baris, dan margin tanpa mengubah makna teks. Untuk daftar, gaya penanda dan posisinya memengaruhi tampilan item yang membungkus, sementara HTML tetap menyediakan struktur dan urutan daftar.

Pisahkan spasi baris dari spasi paragraf

.article p {
  line-height: 1.65;
  margin-block: 0 1.2em;
}

Nilai line-height yang lebih besar memperlebar jarak antarbaris dalam satu paragraf. Hubungannya dengan ukuran font dijelaskan dalam Font, Ukuran Font, dan Tinggi Baris CSS. Meningkatkan margin-block meningkatkan ruang luar antara kotak paragraf dan konten berikutnya. Menggunakan keduanya secara bergantian mungkin terlihat baik pada paragraf pendek, tetapi bisa menghasilkan jarak antarbaris yang berlebihan pada paragraf panjang.

margin-block: 0 1.2em menetapkan margin-awal-blok menjadi nol dan margin-akhir-blok menjadi 1.2em. Dalam contoh penulisan horizontal ini, itu adalah atas dan bawah. Penulisan vertikal mengubah arah fisik. Di sini, em menggunakan ukuran font paragraf itu sendiri. Lihat MDN: margin block.

Peramban menyediakan margin paragraf dan daftar default. Timpalah secara sengaja untuk membedakan default tersebut dari jarak Anda sendiri. Margin blok vertikal yang berdekatan dapat runtuh daripada bertambah. Contoh ini mengatur margin awal paragraf menjadi nol dan mengontrol jarak dengan margin akhirnya. Untuk detail lebih lanjut, lihat Model Kotak CSS: Konten, Padding, Border, dan Margin.

Bandingkan perataan teks dan indentasi baris pertama

.article p { text-align: start; }

.article .intro { text-indent: 1.5em; }

text-align menentukan perataan teks dalam satu baris. start adalah awal aliran teks dan berada di sebelah kiri dalam dokumen dasar dari kiri ke kanan. Ini bukan properti yang memindahkan seluruh kotak paragraf ke tengah layar. Deskripsi yang panjang dan dirata-tengah memiliki posisi awal yang berbeda untuk setiap baris, jadi pilih perataan yang mudah dibaca untuk badan teks terlebih dahulu.

text-indent: 1.5em mengindentasi awal baris pertama, bukan setiap baris. Saya menaruh class="intro" di paragraf pertama dari seluruh contoh agar Anda dapat melihatnya beraksi. Jika Anda ingin mengindentasi seluruh paragraf, Anda perlu meninjau pengaturan lain seperti padding. Ubah perataan, indentasi, dan margin, lalu bandingkan bagian mana yang bergerak.

Posisikan penanda daftar dan teks yang terbungkus

Gunakan ol untuk proses yang berurutan dan ul untuk item di mana urutan tidak penting. Mengubah bentuk angka menjadi titik di CSS tidak mengubah struktur HTML asli. Pilih arti dari konten terlebih dahulu lalu sesuaikan cara tampilan.

Dengan outside, penanda daftar berada di luar kotak konten, jadi sisakan ruang di awal inline daftar. Dalam contoh dari kiri ke kanan ini, padding-inline-start: 1.6em memberikan padding kiri. Dengan inside, penanda mengambil ruang di baris pertama; baris berikutnya dapat meluas di bawah posisinya. Bandingkan item yang dibungkus secara realistis.

Menghapus penanda daftar juga memerlukan pemeriksaan aksesibilitas. Safari dapat menghilangkan daftar dengan list-style: none dari pohon aksesibilitas ketika berada di luar nav. Pertimbangkan role="list" saat mempertahankan semantik daftar diperlukan. Contoh lengkap pelajaran ini tetap mempertahankan penandanya. Lihat MDN: list style.

Pisahkan jarak antar item dari jarak baris

.article li + li { margin-block-start: 0.45em; }

li + li memilih li yang muncul tepat setelah li lainnya. Tidak membuat spasi tambahan sebelum item pertama, tetapi menambahkan jarak sebelum item kedua dan setiap item berikutnya. Bagian dalam sebuah item yang membentang di beberapa baris dikontrol oleh tinggi-baris (line-height) yang diwarisi dari daftar. Jika Anda hanya menambah jarak antara item karena kontennya padat, kalimat dalam item masih bisa terlihat sempit.

Jalankan contoh paragraf dan daftar yang lengkap

Simpan kode di bawah ini sebagai UTF-8 di paragraphs.html dan buka. Karena kita telah mempertahankan kalimat di kedua daftar tetap sama, kita hanya bisa membandingkan di mana mereka muncul. Indentasi baris pertama dan daftar berurutan juga diperiksa dalam file yang sama.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing paragraphs and lists</title>
  <style>
    body { margin: 24px; font-family: sans-serif; color: #333; }
    .article { max-width: 65ch; }
    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }
    .article .intro { text-indent: 1.5em; }
    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }
    .article li + li { margin-block-start: 0.45em; }
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
    ol { list-style-type: decimal; }
  </style>
</head>
<body>
  <main class="article">
    <h1>Small Garden visitor guide</h1>
    <p class="intro">If this is your first visit, check the signs first. This paragraph has a first-line indent. When the text wraps, the remaining lines return to the normal paragraph edge.</p>
    <p>Use line-height for spacing between lines and margin for spacing between paragraphs. Narrow the window and check readability as the text wraps onto more lines.</p>
    <h2>outside list</h2>
    <ul class="outside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>inside list</h2>
    <ul class="inside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>Preparation in order</h2>
    <ol><li>Read the notice.</li><li>Prepare a watering can.</li><li>Put tools back after use.</li></ol>
  </main>
</body>
</html>

Uji setiap perubahan jarak

1. Kurangi lebar jendela sehingga item daftar mencakup lebih dari satu baris. Untuk outside, periksa apakah baris kedua sejajar dengan awal teks baris pertama, dan untuk inside, periksa apakah baris kedua memanjang ke ruang tempat penanda berada.
2. Ganti text-indent di .intro menjadi 0. Periksa apakah posisi awal hanya baris pertama dari paragraf pertama berubah dan kembalikan ke 1.5em.
3. Ubah nilai margin-block end dari paragraf menjadi 0. Pastikan bahwa jarak antara paragraf berkurang sambil mempertahankan jarak antar baris dalam paragraf. Selanjutnya, ubah hanya line-height menjadi 1.2 untuk membedakan perbedaan tersebut dan kemudian kembalikan ke nilai semula.
4. Bandingkan dengan mengubah 0.45em dari li + li menjadi 0 dan 1em. Pastikan bahwa jarak antarbaris di dalam item dan ruang sebelum item pertama tidak berbeda.

Jika sebuah simbol terpotong, periksa padding daftar dan overflow dari elemen luar. Jika hanya beberapa paragraf yang memiliki jarak berbeda, periksa selektor dan gaya default browser. 65ch dalam seluruh contoh adalah panjang maksimum berdasarkan lebar angka 0 dan bukan nilai tetap untuk jumlah karakter.