可點選QR code
文章專區
網頁設計相關文章
CSS的text-indent
text-indent屬性可以幫段落文字做縮排與凸排，將文字調到想要的位置上，相當方便唷！
比如說想將第一行文字凸出一個字的空間，如下範例：
CSS:
ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:1em;}
ul li{text-indent:-1em;}
裡面要作凸排的文字設text-indent:-1em表示向左移動一個字的空間(1em)，em是文字的單位之一，取決於你當時設定的文字大小，如上述範例設定font-size:16px，那麼在這段文字裡1em=16px。同理，若你要設定向左移動三個字的話，便設text-indent:-3em即可。
而由於text-indent的值設定成負數會使得文字凸出區塊之外，所以外面的容器要設定成padding-left:1em 將整塊文字往右移。
常見的文字首行縮排也是如上作法，只是將text-indent的數值從負數寫成正數而已，而容器則不須另外設定。
CSS:
ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:-1em;}
ul li{text-indent:1em;}
善用text-indent可以幫助調整文字版面，算是個網頁設計上的小技巧，不妨善加使用唷。
