Saat bekerja dengan gaya teks, Anda dapat mengatur jarak yang diperlukan antara karakter, kata, dan baris. Jarak tersebut ditentukan dalam satuan apa pun dimensi CSS, baik itu px , pt , em atau lainnya. Pengecualian adalah persentase - persentase dapat digunakan untuk mengatur jarak antar baris (terdepan), tetapi tidak berfungsi saat mengatur jarak antar karakter atau kata.

Spasi karakter CSS: spasi huruf

Anda dapat mengatur spasi karakter menggunakan properti spasi huruf CSS. Selain nilai biasa (positif dan negatif), Anda juga dapat menggunakan nilai warisan (untuk mewarisi nilai dari induknya) dan normal (jika ingin mengembalikan jarak normal antar karakter).

Contoh penulisan interval antar karakter:

P ( spasi huruf: 2em; )

Spasi antar kata: spasi kata

Properti spasi kata CSS berbeda dari yang sebelumnya karena mengatur jarak antar kata, bukan antar karakter. Untuk dari properti ini nilai normal dan warisan juga disediakan. Anda dapat menentukan nilai negatif. Di bawah ini adalah contoh entri gaya:

P (spasi kata: 6 piksel; )

Spasi baris: tinggi baris

Dengan menggunakan properti line-height CSS, Anda dapat mengatur jarak antar baris teks. Seperti yang disebutkan di awal topik, untuk menentukan nilai awal, selain satuan pengukuran lainnya, Anda dapat menggunakan persentase. Dimungkinkan juga untuk menulis nilai sebagai pengali (angka lebih besar dari 0): untuk menghitung jarak, browser akan mengalikan ukuran font dengan angka yang diberikan. Nilai negatif tidak berhasil. Nilai yang tersedia adalah normal dan mewarisi.

Di bawah ini adalah contoh cara melakukannya spasi baris CSS:

P (tinggi garis: 180%; )

Di tangkapan layar Anda dapat melihat tampilan teks dengan ketiga properti:

Tangkapan Layar: Spasi di CSS

Hasil

Saat mengatur spasi antar kata, karakter, atau baris, pertama-tama pastikan teks yang dihasilkan mudah dibaca. Properti tersebut harus ditangani dengan hati-hati dan selalu digunakan secukupnya, tanpa fanatisme, jika tidak, semua konten teks terancam berubah menjadi rangkaian huruf yang tidak terbaca.

Menangani spasi antara huruf dan kata

1. Jarak antar kata spasi kata

Mengatur jarak antar kata. Nilai positif dan negatif dapat digunakan. Dengan makna negatif, kata-kata bisa saling tumpang tindih.

Nilai spasi kata dipengaruhi oleh nilai properti perataan teks pada kasus teks rata. Diwarisi.

Sintaksis

P (spasi kata: normal;) p (spasi kata: 2px;)
Beras. 1. Spasi antar kata

2. Spasi huruf

Properti mengatur jarak antara huruf (jumlah pelacakan) dan simbol. Dapat mengambil nilai positif dan negatif. Dianjurkan untuk menggunakan untuk meningkatkan ekspresi dan keterbacaan judul, definisi, dll. Diwarisi.

Sintaksis

P (spasi huruf: normal;) p (spasi huruf: 2 piksel;)
Beras. 2. Mengubah jarak antar huruf menggunakan properti letter-spacing

3. Menangani ruang kosong

Properti ini menangani spasi antara kata dan jeda baris dalam suatu elemen. Tidak diwariskan.

Sintaksis

P (spasi putih: normal;) p (spasi putih: nowrap;) p (spasi putih: pra;) p (spasi putih: pra-bungkus;) p (spasi putih: pra-baris;)

4. Mengatur ukuran tab

Untuk mengubah jumlah indentasi yang diperoleh menggunakan kunci TAB, gunakan properti ukuran tab. Nilai properti diabaikan ketika salah satu dari berikut ini disetel tiga arti properti spasi putih pre-line, normal, atau nowrap.

Hanya berfungsi untuk elemen Dan <pre>Untuk sisanya <a href="https://danykom.ru/id/css-pozicionirovanie-blokov-otnositelno-drugih-pozicionirovanie/">elemen blok</a> nilainya akan selalu sama dengan satu. Nilai properti yang ditentukan dalam satuan panjang hanya didukung di Chrome 42+.</p> <p><b>Sintaksis</b></p><p>Pra (-moz-ukuran tab: 16;) /* Firefox */ pra (-o-ukuran tab: 16;) /* Opera 10.6-12.1 */ pra (ukuran tab: 16;)</p> <br><p>Sebagai aturan, untuk setiap font <a href="https://danykom.ru/id/kak-obrezat-stranicu-v-vorde-obrezaem-kartinku-s-sohraneniem/">ukuran tertentu</a> nilai yang telah ditetapkan <b>spasi antar kata</b>, <b>jarak antar huruf dalam satu kata</b> Dan <b>tinggi garis visual</b>. Perlu dicatat bahwa jarak antar huruf yang berbeda dalam font monospace seperti Courier New selalu sama. Pada jenis font lain, jarak antar huruf bergantung pada kombinasi huruf - dalam banyak kasus jaraknya tetap, tetapi di antara beberapa pasangan huruf, jarak tersebut sengaja dikurangi untuk membuat teks lebih “rata” dan merata secara visual. Misalnya jarak antar huruf AU lebih kecil dibandingkan jarak antar huruf NP, karena huruf N dan P berbentuk lurus, serta huruf A dan U mempunyai kemiringan, apalagi mengarah ke satu arah. Pada <a href="https://danykom.ru/id/sinyaya-polosa-cherez-odinakovoe-rasstoyanie-epson-razbiraemsya-v-voprose/">jarak yang sama</a> antar huruf, A dan U akan tampak berjauhan dibandingkan H dan P. Untuk memperhalus efek ini, jarak di antara keduanya sedikit dikurangi, sehingga baris teks menjadi sejajar secara visual. Fenomena ini adalah salah satu manifestasi ilusi optik yang paling mencolok.</p> <p>DI DALAM <b>CSS</b> untuk blok teks, Anda dapat menyesuaikan ukuran jarak antar kata dalam teks, yaitu, pada dasarnya, mengubah ukuran spasi. Anda juga dapat mengubah jarak antar huruf dalam sebuah kata (yaitu membuat teks padat atau jarang) dan mengontrol tingginya <a href="https://danykom.ru/id/raznoe-rasstoyanie-mezhdu-strokami-v-vorde-izmenenie-rasstoyaniya/">rangkaian teks</a>. Tinggi garis adalah jarak antara garis pangkal dua garis yang berdekatan.</p> <p>Tidak ada analog dari properti seperti itu di HTML. Interval hanya dapat diatur menggunakan <b>CSS</b>.</p> <h2>properti spasi kata</h2> <p>Properti ini memungkinkan Anda mengatur jarak antar kata. Satuan panjang apa pun diperbolehkan sebagai nilai, baik positif maupun negatif. Dengan nilai negatif, jarak antar kata berkurang, dan jika nilai terlalu besar, kata-kata bisa menjadi terlalu dekat atau bahkan “bertabrakan” satu sama lain. Hal ini akan berdampak negatif terhadap keterbacaan teks, jadi berhati-hatilah saat menetapkan nilai tersebut. Menentukan nilai persentase tidak diperbolehkan.</p> <p>Mari kita lihat sebuah contoh:</p><h2>properti spasi huruf</h2> <p>Properti ini menentukan jarak antar huruf dalam sebuah kata. Ini diatur serupa dengan jarak antar kata dalam satuan panjang apa pun. Dimungkinkan untuk menetapkan nilai negatif, di mana huruf-hurufnya mungkin terlalu berdekatan satu sama lain atau bahkan saling tumpang tindih. Oleh karena itu, gunakanlah dengan hati-hati. Menetapkan nilai sebagai persentase tidak diperbolehkan.</p> <p>Dengan menggunakan properti ini, Anda dapat menipiskan huruf, misalnya pada judul, yang akan terlihat cukup orisinal. Direkomendasikan bahwa, di satu sisi, jarak antar huruf harus diperbesar secara signifikan sehingga judul terlihat menonjol dengan latar belakang teks biasa, dan di sisi lain, spasi tidak boleh terlalu besar agar persepsi keseluruhan teks tidak memburuk.</p> <p>Kedua properti tersebut <b>spasi kata</b> Dan <b>spasi huruf</b> dapat digunakan bersama-sama karena saat Anda menambah jarak antar huruf, untuk menjaga keterbacaan dan pemisahan kata, Anda mungkin juga perlu menambah jarak antar kata secara bersamaan. Di Sini <a href="https://danykom.ru/id/kak-sozdat-prodayushchii-lending-peidzh-pravila-razrabotki-i-tipichnye-oshibki/">contoh tipikal</a> desain tajuk:</p><table width="80%" border="0" cellspacing="0" cellpadding="0" valign="top" align="center"><tr><td class="table_cent" align="center">H1 (spasi kata: 2 ex; spasi huruf: 0,3 ex)</td> </tr></table></td> <p>Mengubah spasi huruf standar dalam sebuah teks mungkin diperlukan untuk memusatkan perhatian padanya. <a href="https://danykom.ru/id/kak-zamenit-cvet-obekta-na-drugoi-v-fotoshope-na-otdelnom-uchastke-i-na/">wilayah yang terpisah</a>. Untuk mengubah jarak antar huruf di Word, Anda harus mengikuti urutan tindakan yang diberikan.</p> <h2><span>Penyesuaian interval</span></h2> <br><img src='https://i1.wp.com/v-ofice.ru/wp-content/uploads/2017/07/rasstoyanie-mezhdu-bukvami1.jpg' width="100%" loading=lazy loading=lazy><p>Untuk menambah jarak antar huruf, pilih Jarang.</p> <p><img src='https://i2.wp.com/v-ofice.ru/wp-content/uploads/2017/07/rasstoyanie-mezhdu-bukvami4.jpg' width="100%" loading=lazy loading=lazy></p> <p>Secara default, Anda dapat memperluas spasi huruf sebesar 1 poin, sama dengan 0,35 mm. Untuk kenyamanan pengguna, contoh disediakan di bagian bawah yang menunjukkan bagaimana teks akan terlihat dalam kasus ini. Tentunya, pengguna dapat mengubah nilainya sebesar 1 poin dengan menggunakan segitiga kecil untuk menambah atau mengurangi jarak sebesar 0,1 pt. Pilihan lainnya adalah dengan langsung masuk ke kolom ukuran interval <a href="https://danykom.ru/id/chto-takoe-funkciya-srznach-v-excel-i-dlya-chego-ona-nuzhna-raschet-srednego/">nilai yang diinginkan</a> dan klik oke. Anda dapat memasuki jarak yang sangat jauh.</p> <p>Untuk mengurangi interval, Anda perlu memilih “Terkompresi”.</p> <p><img src='https://i2.wp.com/v-ofice.ru/wp-content/uploads/2017/07/rasstoyanie-mezhdu-bukvami5.jpg' width="100%" loading=lazy loading=lazy></p> <p>Pengguna dapat mengurangi spasi huruf dengan cara yang sama seperti pada kasus sebelumnya - secara default sebesar 1 pt, atau dengan mengatur nilai yang diinginkan. Seperti dapat dilihat dari contoh, di <a href="https://danykom.ru/id/internet-s-postoplatnoi-sistemoi-mezhdunarodnyi-rouming-tarificiruetsya-v-dannom-sluchae-soglasno-dru/">dalam hal ini</a> kondensasi teks berdampak negatif pada keterbacaannya.</p> <h2></h2> <p>Perubahan spasi huruf yang dibahas di atas adalah sama untuk semua huruf pada teks yang dipilih. Dalam teks <a href="https://danykom.ru/id/testovyi-redaktor-word-referat-tekstovyi-redaktor-word-dlya-windows/">Penyunting kata</a> Anda dapat mengubah spasi huruf secara lebih halus, dengan mempertimbangkan kekhasan garis besar huruf yang berdekatan. Saat fungsi kerning diaktifkan, Word memilih spasi optimal antar pasangan karakter secara otomatis, bergantung pada karakteristik font. <a href="https://danykom.ru/id/prodvizhenie-gruppy-vkontakte-samostoyatelno-poshagovo-udelyaite-vnimanie/">Tujuan dari kerning adalah untuk meningkatkan</a> daya tarik visual</p> <p><img src='https://i1.wp.com/v-ofice.ru/wp-content/uploads/2017/07/rasstoyanie-mezhdu-bukvami6.jpg' width="100%" loading=lazy loading=lazy></p> <p><img src='https://i2.wp.com/v-ofice.ru/wp-content/uploads/2017/07/rasstoyanie-mezhdu-bukvami7.jpg' width="100%" loading=lazy loading=lazy></p> <blockquote><p>teks. <a href="https://danykom.ru/id/kak-sdelat-krupnyi-shrift-v-odnoklassnikah-kak-uvelichit-shrift/">Perbandingan cermat dari dua tangkapan layar terakhir – sebelum dan sesudah kerning – memungkinkan Anda memverifikasi hal ini. Kerning terutama digunakan dalam teks dengan</a> dalam cetakan besar</p> </blockquote> <h2><span>– judul dan logo.</span></h2> <p><span class="NWG3kraAPh4"></span></p> <p>Di atas, pertimbangan spasi huruf dilakukan sehubungan dengan Word 2010. Pada Word versi terdekat - 2007 dan 2013 tidak ada perbedaan.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="comment even thread-even depth-1" id="dsq-comment-2"> <div id="dsq-comment-header-2" class="dsq-comment-header"> <cite id="dsq-cite-2"> <span id="dsq-author-user-2">Sergei Savenkov</span> </cite> </div> <div id="dsq-comment-body-2" class="dsq-comment-body"> <div id="dsq-comment-message-2" class="dsq-comment-message"> <p>semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat</p> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="wpb_column vc_column_container td-pb-span4"> <div class="vc_column-inner "> <div class="wpb_wrapper"> <div class="wpb_widgetised_column wpb_content_element"> <div class="wpb_wrapper"> <div class="td-a-rec td-a-rec-id-sidebar td-rec-hide-on-p "> <div id="adriver_banner_1494422254"></div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_1 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-2' style='height:600px; width:300px;'> </div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_2 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-3' style='height:600px; width:300px;'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-14"> <div class="td-container td-footer-bottom-full"> <div class="td-pb-row"> <div class="td-pb-span3"> <aside class="footer-logo-wrap"><a href="https://danykom.ru/id/"><img class="td-retina-data" src="/uploads/logo.png" data-retina="/wp-content/uploads/2017/02/logo_544x180_bw.png" alt="Teknik. Berita. Telepon. Laptop. Perbandingan. jendela" title="Teknik. Berita. Telepon. Laptop. Perbandingan. jendela"/ loading=lazy loading=lazy></a></aside> </div> <div class="td-pb-span5"> <aside class="footer-text-wrap"> <div class="block-title"><span>Informasi umum</span></div>.</aside> </div> <div class="td-pb-span4"> <aside class="footer-social-wrap td-social-style-2"> <div class="block-title"><span>Situs jejaring sosial</span></div> <span class="td-social-icon-wrap"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://danykom.ru/umenshit-rasstoyanie-mezhdu-bukvami-css-svoistva-css-intervaly-str-1/" title="Facebook"> <i class="td-icon-font td-icon-facebook"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="Instagram"> <i class="td-icon-font td-icon-instagram"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="RSS"> <i class="td-icon-font td-icon-rss"></i> </a> </span></aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span7 td-sub-footer-menu"> <div class="menu-td-demo-footer-menu-container"> <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> </ul> </div> </div> <div class="td-pb-span5 td-sub-footer-copy">Teknologi 2024. Berita. Telepon. Laptop. Perbandingan. jendela</div> </div> </div> </div> </div> <link rel='stylesheet' id='css-5-css' href='/wp-content/mmr/ffba0e2b-1516146715.min.css' type='text/css' media='all' /> <script type='text/javascript' src='https://danykom.ru/wp-content/mmr/4ab436a1-1516146715.min.js'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> </body> </html>