Cara Mengatur Jarak Spasi dalam Paragraf HTML Dengan CSS

Properti line-height

dalam tutorial belajar css kali ini kita akan belajar membuat cara mengatur jarak spasi antara baris, jarak dari baris satu ke baris dua.

tutorial-css-09

Mengatur Jarak Spasi dalam Paragraf menggunakan line-height

untuk mengatur jarak spasi antara baris satu dengan baris dibawahnya dalam css kita bisa memakai property line-height.

line-height berfungsi untuk mengatur tinggi antara baris dalam paragraf. jika kita sudah membuat paragraf dengan html kita bisa mengatur jarak spasi dalam paragraf ini dengan css.

fungsi dari pembuatan jarak spasi ini adalah untuk memudahkan tulisan untuk dibaca. jika spasinya terlalu rapat pasti akan sulit untuk dibaca.

yang sudah pernah menyusun laporan tugas akhir pasti sudah sering mendengar fungsi dari spasi ini.

Nilai/value dari propert line-height dapat memakai nilai pixel, persen, em, atau angka (tanpa satuan). Berikut adalah contoh penulisannya:

p {
line-height:18px;
}

Menghitungan Nilai line-height

untuk menentukan nilai line-height kita harus tau dulu perhitungan nilainya. misalnya font-size sebesar 14px, line-height sebesar 18px, maka jarak spasi 18px-14px= 4px

namun perhitungan nilai ini tidak perlu dipikirkan karena penentuan nilai ini bebas, kita bisa memakai 100px, 200px jika kita mau. tidak ada ketentuan khusus untuk penentuannya.

Tutorial Mengatur Jarak Spasi Paragraf (line-height)

untuk memperjelas maksud dan tujuan dari properti line-hieght kita akan masuk ke tutorialnya, untuk lebih jelas silakan lihat contoh dibawah ini:

Contoh Membuat Jarak Spasi Paragraf

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Spasi Paragraf CSS</title>
<style type="text/css">
.contoh1 { font-size:18px; }
.contoh2 { font-size:18px; line-height: 20px;}
.contoh3 { font-size:18px; line-height: 1.5em;}
.contoh4 { font-size:18px; line-height: 2;}
</style>
</head>
<body>
<h2>Belajar Membuat Spasi Paragraf CSS Property line-height</h2>

<h3>Font-size: 18px (nilai default line-height: 1.2)</h3>
<p class="contoh1">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet. Eam facilis omittantur at, usu efficiantur
neglegentur delicatissimi et, in per vero splendide
persequeris.<p>

<h3>Font-size: 18px, line-height: 20px</h3>
<p class="contoh2">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet. Eam facilis omittantur at, usu efficiantur
neglegentur delicatissimi et, in per vero splendide
persequeris.<p>

<h3>Font-size: 18px, line-height: 1.5em</h3>
<p class="contoh3">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet. Eam facilis omittantur at, usu efficiantur
neglegentur delicatissimi et, in per vero splendide
persequeris.<p>

<h3>Font-size: 18px, line-height: 2</h3>
<p class="contoh4">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet. Eam facilis omittantur at, usu efficiantur
neglegentur delicatissimi et, in per vero splendide
persequeris.<p>
</body>
</html>

Pada Paragraf pertama dalam contoh diatas saya memakai nilai line-height default. sedangkan pada paragraf lainnya saya menentukan dengan satuan nilai yang berbeda.

Keyword:

  • cara pengatur spasi

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas