text-indent的用法
生活随笔
收集整理的這篇文章主要介紹了
text-indent的用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、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。
最后，還是要說一下，本人水平有限，如有什么不當之處還請多指正。
轉載于:https://www.cnblogs.com/zzjeny/p/5615410.html
總結
以上是生活随笔為你收集整理的text-indent的用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上下文管理、redis发布订阅、Rabb
- 下一篇： linunx 定位最耗资源的进程