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.
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>
hepsini bulduguma sevindim