Mengatur jarak spasi di css

Baiklah itu saja yang dapat saya sampaikan tentang cara mengatur jarak spasi. Semoga bermanfaat dan jangan lupa terus kunjungi blog kami untuk dapat mendapatkan informasi tentang pembelajaran design website.

Table of Contents Show

Text Indentation
Letter Spacing
Line Height
Word Spacing
White Spacing
Apa CSS property untuk mengatur jarak antar baris?
Letter spacing CSS untuk apa?
Apa itu Line

Pada saat ini kebutuhan dalam membuat website sangat beragam, demi memberi dampak dan kesan positif client tanpa mengurangi nilai esensi pada website dan pengalaman para pengunjung website.Sebagai programmer, baik itu front end ataupun backend website, aplikasi berbasis android, ios ataupun aplikasi desktop dan komputer, ketelitian sangat dibutuhkan dengan menyangkut detail dari alur program, detail warna, bahkan sampai detail tampilan dan tata letak dan ukuran teks

Bagi teman-teman yang masih belajar tentang HTML CSS mungkin masih banyak properti css yang belum kalian ketahui baik itu fungsi ataupun cara penggunaannya. Contohnya saja di CSS ada properti yang digunakan untuk mengatur jarak antara kata satu dengan kata yang lainnya.Untuk mengatur jarak antara satu kata dengan kata yang lainnya kalian bias menggunakan property word-spacing, berikut adalah contoh penggunaan property word-spacing:

Pertama kita buat struktur HTML seperti berikut:

Cara memberikan jarak kata menggunakan CSS
Ini adalah paragraf yang diberikan word-spacing

Target penggunaan word-spacing kita adalah pada tag

yang memiliki class .wspc

Selanjutya kita akan membuat CSS nya seperti berikut

.container{
           width: 300px;
           margin: auto;
           background: #9ddb44;
           padding: 10px;
           font-family: arial
       }
       .container p {
           color:#777;
           font-weight: bold;
       }
       .container .wspc{
           background-color: green;
           color: white;
           padding: 1em;
           word-spacing: 2em;
       }

Dalam penggunaanya biasa word-spacing sangat diperlukan pada desain portal berita pada saat menata kata-kata yang agar terlihat lebih presisi atau bahkan untuk portfolio yang memiliki desain unik sesuai dengan kreatifitas kalian.

Kalian juga bisa baca artikel yang berhubungan tentang mengatur letak text pada artikel yang berjudul penggunaan justify content pada flexbox

Baiklah teman-teman saya kira itu saya yang kita bahas mengenai cara mengatur jarak kata menggunakan CSS, sekarang tergantung kalian untuk menggunakan sesuai kreasi masing-masing.

Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text spacing. Pengaturan text spacing pada CSS biasanya terdiri dari text indentation, letter spacing, line height, word spacing dan white spacing. Berikut akan dibahas lebih lanjut tentang cara penggunaan text spacing pada CSS.

Section Artikel

Text Indentation

Properti text-indent pada CSS digunakan untuk menentukan indentasi baris pertama teks, biasanya digunakan pada sebuah paragraf.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<p>  Dimasa muda dan masa rentanku, ayah memberiku nasihat yang terus aku pikirkan sejak saat itu. "Kapanpun kamu ingin mengkritik seseorang," katanya kepadaku, "ingatlah bahwa tidak setiap orang di dunia ini memiliki kelebihan seperti yang aku miliki."
</p>

</body>
</html>

Letter Spacing

Properti letter-spacing pada CSS berfungsi untuk menentukan spasi antar karakter dalam teks.

Berikut ini adalah contoh yang menunjukkan cara menambah atau mengurangi spasi antar karakter:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

Line Height

Properti line-height pada CSS berfungsi untuk menentukan jarak antar baris perbaris. Agar lebih jelas berikut adalah contoh penerapannya.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<p>
Pragraf ini menggunakan jarak antar baris standar<br>
Kebanyakan browser memiliki jarak antar baris default kira-kira 110%-120%.<br>
</p>

<p class="small">
Paragraf ini menggunakan jarak antar baris lebih kecil.<br>
Paragraf ini menggunakan jarak antar baris lebih kecil.<br>
</p>

<p class="big">
Paragraf ini menggunakan jarak antar baris lebih besar.<br>
Paragraf ini menggunakan jarak antar baris lebih besar.<br>
</p>

</body>
</html>

Word Spacing

Properti word-spacing pada CSS digunakan untuk menentukan spasi atau jarak antar kata dalam teks.

Berikut ini adalah contoh yang menunjukkan bagaimana cara menambah atau mengurangi jarak antar kata menggunakan word spacing kata:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
</style>
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

White Spacing

Properti white-space pada CSS digunakan untuk menentukan bagaimana menangani elemen kosong (jarak enter) dalam sebuah kalimat.

Contoh di bawah ini akan menunjukkan cara menonaktifkan wrapping teks di dalam elemen, hapus properti white-space agar terlihat perbedaan antara paragraf yang menggunakan white-space dan tidak menggunakan white-space:

Apa CSS property untuk mengatur jarak antar baris?

Jarak antar baris bisa kita atur menggunakan properti CSS line-height .

Letter spacing CSS untuk apa?

Letter Spacing pada CSS berfungsi untuk mengatur jarak antar karakter atau bisa disebut juga untuk mengatur jarak antar teks didalam sebuah halaman website. Biasanya letter spacing ini digunakan untuk mengatur jarak antar karakter pada sebuah judul didalam website, atau mengatur teks pada artikel didalam website.