一、text-indent應用於塊級元素
<style type="text/css"> *{ margin:0; padding:0; } body{ font-size:12px; color:#333; } p{text-indent:2em;background-color:#f00;color:#fff;} </style> </head> <body> <p>攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網</p>
我們也可以通過負的text-indent來制作一些效果：
<style type="text/css"> *{ margin:0; padding:0; } body{ font-size:12px; color:#333; } p{ text-indent:-6em;padding-left:6em; } </style> </head> <body> <p>攜程旅行網：中國領先的在線旅行服務公司，創立於1999年，總部設在中國上海。攜程旅行網向超過五千余萬注冊會員提供包括酒店預訂、機票預訂、度假預訂、商旅管理、高鐵代購以及旅游資訊在內的全方位旅行服務。目前，攜程旅行網擁有國內外五千余家會員酒店可供預訂，是中國領先的酒店預訂服務中心，每月酒店預訂量達到五十余萬間夜。在機票預訂方面，攜程旅行網是中國領先的機票預訂服務平台，覆蓋國內外所有航線，並在四十五個大中城市提供免費送機票服務，每月出票量四十余萬張。</p>
二、text-indent應用於行內元素
沒有效果；
三、text-indent應用於替換元素
這里以應用到image與input元素為例進行說明，
<img src="pic_ad1.png" alt="" style="text-indent:2em;" /> <br /> <input type="text" value="ctrip" style="text-indent:2em" /> <br /> <input type="text" value="攜程旅行網" style="text-indent:2em" />
img縮進了2個字符，input里面的value值夜縮進了2個字符。
六、總結
看到這么多的不同點，您是不是感覺到很亂？如果你覺得不亂，那好，你是一牛人。不管你亂不亂，反正我是亂了。
所以，我給自己總結了一下：
1.text-indent只用於div，p這樣的元素上，像image、input、inline-block、inline元素絕對不用。
2.text-indent的值如果子元素也要用到父元素的值，用px單位，而絕不用em。
最后，還是要說一下，本人水平有限，如有什么不當之處還請多指正。