Exemple de code de la propriété CSS text-indent.

<style>
.row{ display:block; margin:20px }
.col{ display:inline-block; box-sizing: border-box; width:40%; padding:0; margin:0 }
.overflow { overflow:hidden }
.inline-block { display : inline-block }
.nowrap { white-space:nowrap }
.borderparent,.col,.border{ border:1px solid #666 }
.borderparent{ border-color:green }

.exemple-text-indent-none{ text-indent : none }
.exemple-text-indent-50pourcent{ text-indent : 50% }
.exemple-text-indent-100pourcent{ text-indent : 100% }
.exemple-text-indent-10px{ text-indent : 10px } 
.exemple-text-indent-moins10px{ text-indent : -10px } 
.exemple-text-indent-2em{ text-indent : 2em }
</style>

<div class="exemple">
sans text-indent; display : block; <br>sans text-indent; display : block; 
</div>
<div class="row">
<p class="col exemple-text-indent-10px" dir="ltr">text-indent: 10px<br>text-indent: 10px</p>
<p class="col exemple-text-indent-10px" dir="rtl">text-indent: 10px<br>text-indent: 10px</p>
</div>
<div class="row">
<span class="border exemple-text-indent-10px" dir="ltr">text-indent: 10px sur un inline<br>text-indent: 10px</span><br>
<span class="border exemple-text-indent-10px" dir="rtl">text-indent: 10px sur un inline<br>text-indent: 10px</span>
</div>
<div class="row">
<p class="col exemple-text-indent-moins10px" dir="ltr">text-indent: -10px<br>text-indent: -10px</p>
<p class="col exemple-text-indent-moins10px" dir="rtl">text-indent: -10px<br>text-indent: -10px</p>
</div>
<div class="row">
<p class="col exemple-text-indent-moins10px overflow " dir="ltr">text-indent: -10px et overflow<br>text-indent: -10px</p>
<p class="col exemple-text-indent-moins10px overflow " dir="rtl">text-indent: -10px et overflow<br>text-indent: -10px</p>
</div>
<div class="row borderparent" style="width:50%">
<div class="border exemple-text-indent-50pourcent" style="width:50%">text-indent: 50%<br>text-indent: 50%</div> 
</div>
<div class="row borderparent"> 
<div class="border exemple-text-indent-50pourcent" style="width:50%">text-indent: 50%<br>text-indent: 50%</div>
</div>
<div class="row borderparent" style="width:50%"> 
<div class="border exemple-text-indent-100pourcent" style="width:50%">text-indent: 100%<br>text-indent: 100%</div>
</div>
<div class="row borderparent"> 
<div class="border exemple-text-indent-100pourcent" style="width:50%">text-indent: 100%<br>text-indent: 100%</div>
</div>
<div class="row borderparent" style="width:50%">
<p class="inline-block border exemple-text-indent-50pourcent nowrap">text-indent: 50% avec nowrap<br>text-indent: 50%</p> 
</div>
<div class="row borderparent"> 
<p class="inline-block border exemple-text-indent-50pourcent nowrap">text-indent: 50% avec nowrap<br>text-indent: 50%</p>
</div>