19/03/2016

CSS Text-Indent (Indentasi baris pertama dalam Paragraf)

19/03/2016

Dalam sebuah paragraf (seperti pada fungsi tag HTML <p>), kita dapat menentukan indentasi garis pertama dengan CSS Text Indent. Yaitu memberikan ruang secara horizontal pada barisan pertama sebuah paragraf agar tampak lebih menjorok ke dalam dan membiarkan baris berikutnya dalam keadaan normal (tidak menjorok).

CSS Text Indent
Nilai Properti CSS Text Indent
  1. Lenght
    • Baris pertama yang menjorok ke dalam ditentukan oleh satuan nilai tetap (px, cm, dll)
  2. percentage
    • Besaran nilai ruang yang kosong pada baris pertama merupakan persentase dari lebar elemen blok yang membungkusnya
  3. inherit
    • Yaitu pengaturan indentasi baris paragraf sesuai aturan yang telah ditentukan pada elemen induknya
Sintaks CSS Text Indent

Sintaks CSS

text-indent: 80px; (lenght)
text-indent: 3%; (percentage)
text-indent: inherit;
Tag HTML yang Mendukung CSS Text Indent
  • body
  • html
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • address
  • blockQuote
  • button
  • caption
  • center
  • dd
  • dir
  • div
  • dl
  • dt,
  • fieldSet,
  • form,
  • input:button,
  • input:reset,
  • input:submit,
  • isIndex
  • legend
  • ol
  • ul
  • li
  • listing
  • marquee
  • menu
  • p
  • plainText
  • xmp
  • pre
  • table
  • td
  • th
  • tr
  • textArea
Contoh Penerapan Sintaks CSS Text Indent