CSS3Yaşam Tarzı

Css Satır Aralığı Ayarlama

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.
css-satir-araligi

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>

İlgili Makaleler

Bir Yorum

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu