textIndent özelliği, element içeriğinde kullanılan metnin ilk satırlarının girintisini (paragraf başı) ayarlar.
DOM Sözdizimi
element.style.textIndent = "girinti"
element.style.textIndent = "yuzde"
CSS Sözdizimi
text-indent: girinti
text-indent: yuzde
| girinti | CSS Ölçü Birimleri ile belirtilen tam bir değer alarak girinti mesafesini belirler. |
| yuzde | Yüzde değer alarak ana elementin genişliğine göre girinti mesafesi hesaplanır. |
Aşağıdaki örnek, css text-indent özelliğini 1cm, 10px ve 50% değerleri ile kullanımını göstermektedir.
<style type="text/css">
div.cerceve {
width: 300px;
border:solid 1px red;
}
p.ornek1cm {
text-indent: 1cm;
}
p.ornek10px {
text-indent: 10px;
}
p.ornek50yuzde {
text-indent: 50%;
}
</style>
<div class="cerceve">
<p class="ornek1cm">| (1cm) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
<div class="cerceve">
<p class="ornek10px">| (10px) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
<div class="cerceve">
<p class="ornek50yuzde">| (50%) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
Canlı Sonuç
| (1cm) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
| (10px) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
| (50%) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.