Bu paylaşımda CSS’de yazı arası boşluk nasıl verilir ve yazı aralığını ayarlamayı örnekle anlatacağım. Html satır arası genişliğini düzenlemek için CSS’de line-height kullanımını göreceğiz.Bu sayede satır aralığı ve boşluğunu isteğimize göre ayarlamış olacağız. Ayrıca line-height nedir sorusuna cevabı örneklerle burada bulabileceksiniz.
Css’de Line-height kullanım çeşitleri aşağıda listelenmiştir.
| line-height: normal; | line-height: 1.6; |
| line-height: 45px; | line-height: 200%; |
| line-height: inherit; | line-height: initial; |
| line-height: unset; | line-height: 3em; |
Canlı Demo
Görsel Çıktısı
Tüm “line-height” kullanım çeşitleri aşağıda görsel ve kod olarak paylaşılmıştır.
Kaynak Kodlar
Aşağıdaki kaynak kodlar “html + css “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
<html>
<head>
<title>CSS Satır Aralığı Line-height Kullanımı</title>
<style>
p.a {
line-height: normal;
}
p.b {
line-height: 1.6;
}
p.c {
line-height: 45px;
}
p.d {
line-height: 200%;
}
p.e {
line-height: inherit;
}
p.f {
line-height: initial;
}
p.g {
line-height: unset;
}
p.h {
line-height: 3em;
}
</style>
</head>
<body>
<h1 style="color:red";>Satır Aralığı line-height Tüm Örnekleri</h1>
<h2>line-height: normal; | Normal Kullanımı</h2>
<p class="a">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığı Normal Büyüklüğünde.</p>
<h2>line-height: 1.6; | Doğrudan Kullanımı</h2>
<p class="b">Bu metin satır aralığı örneğidir (line-height)<br>
Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığı 1.6 Büyüklüğünde.</p>
<h2> line-height:45px; | Pixel kullanımı</h2>
<p class="c">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığı 45px Büyüklüğünde.</p>
<h2> line-height: 200%; | Yüzdeli kullanımı</h2>
<p class="d">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığı 200% Büyüklüğünde.</p>
<h2>line-height: inherit; | inherit Kullanımı</h2>
<p class="e">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığında inherit Kullanılmıştır.</p>
<h2>line-height: initial; | initial Kullanımı</h2>
<p class="f">Bu metin satır aralığı örneğidir (line-height)<br>
TBu Satır Aralığında initial Kullanılmıştır.</p>
<h2>line-height: unset; | unset Kullanımı</h2>
<p class="g">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığında unset Kullanılmıştır. </p>
<h2>line-height: 3em; | em Kullanımı</h2>
<p class="h">Bu metin satır aralığı örneğidir (line-height)<br>
Bu Satır Aralığı 3em Büyüklüğünde.</p>
</body>
</html>
