簡介
本文章簡單的介紹CSS中的兩個在文章排版非常有用的屬性，分別為text-indent(縮進)、word-spacing(字距)。text-indent
相信大家小時候或是現在都有寫過作文，而作文在文章的最前頭都必須要縮進二~四格空白，在網頁中，你可以使用text-indent來實作這個功能，我們來看看下面程式碼
text-indent:50px
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html> 
text-indent:150px
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html> 
word-spacing
word-spaceing表示字與字之間的間隔，word-spacing預設值為0px，該值越大字距越大;如果要讓字與字之間看起來更緊密些，這時候就必須將這個值設為負值。word-spacing:0px
<html>
<head>
<style type="text/css">
p
{
word-spacing:0px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html> 
word-spacing:20px
<html>
<head>
<style type="text/css">
p
{
word-spacing:20px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html> 
word-spacing:-2px
<html>
<head>
<style type="text/css">
p
{
word-spacing:-2px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>
沒有留言:
張貼留言