Text-indent adalah salah satu property pada css, sedangkan fungsinya untuk membuat jarak/lekuk di awal paragraf
Value Text-Indent
Berikut value text-indent
- Length/panjang angka dalam (px, em, in)
- Percentage(%)
Contoh Property Text-Indent Dalam Inline Style
Text-Indent:20px
Dengan text-indent 20px ini kita membuat style dimana pada awal paragraf berjarak 20px
Contoh
<div style="clear:both;background-color:lime;width:500px;text-indent:20px;">
ini text indent:20px
ini text indent:20px
ini text indent:20px
ini text indent:20px
</div>
Tampilanya seperti ini
ini text indent:20px
ini text indent:20px
ini text indent:20px
ini text indent:20px
Text-Indent:40px
Dengan text-indent 40px ini kita membuat style dimana pada awal paragraf berjarak 40px
Contoh
<div style="clear:both;background-color:lime;width:500px;text-indent:40px;">
ini text indent:40px
ini text indent:40px
ini text indent:40px
ini text indent:40px
</div>
Tampilanya seperti ini
ini text indent:40px
ini text indent:40px
ini text indent:40px
ini text indent:40px
Text-Indent:5%
Dengan text-indent 5% ini kita membuat style dimana pada awal paragraf berjarak 5%
Contoh
<div style="clear:both;background-color:lime;width:500px;text-indent:5%;">
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
</div>
Tampilanya seperti ini
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
INI ADALAH TEXT indent 5%
Text-Indent:10%
Dengan text-indent 10% ini kita membuat style dimana pada awal paragraf berjarak 10%
Contoh
<div style="clear:both;background-color:lime;width:500px;text-indent:10%;">
ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10%
</div>
Tampilanya seperti ini
ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10% ini text indent:10%
Contoh Text-Indent Dalam Internal Style Kompleks
Perhatikan code dibawah
<html>
<head>
<title>text-indent css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misaltext-indent1{
text-indent:20px;
}
#misaltext-indent2{
text-indent:40px;
}
#misaltext-indent3{
text-indent: 60px;
}
#misaltext-indent4{
text-indent:30%;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-indent1">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misaltext-indent2">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misaltext-indent3">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misaltext-indent4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear:both;"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
Untuk melihat hasilnya
- Copy markup style diatas
- Paste ke notepad
- Save as (pilih all types) dengan nama contohtext-indent.htm
- Jalankan(double click), atau
- Open with (firefox, ie, opera, safari, chrome)
- Silakan edit valuenya
- Letak valuenya antara : (titik dua) dan ;(titik koma)
- Selamat belajar
Semoga bermanfaat
Source : http://www.indaam.com/2010/06/css-fungsi-property-text-indent-serta-valuenya
