怎麼讓多行文字在div裡顯示的好看些?

Tags: 時候, 文字, 樣式,

當我們製作網站的時候,經常會在div中調整裡面文字,為了好看些,為了文字在div裡顯示更加協調,需要用一些CSS樣式去調整。下面就來講解一下,怎麼讓多行文字在div裡顯示的好看些。

工具/原料

電腦

瀏覽器

VS2013

方法/步驟

寫一個div,裡面寫兩段多行文字,設定樣式(width: 400px; height: 400px; border: solid 1px #808080)。然後用瀏覽器瀏覽,發現文字在div裡很不協調。

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

樣式設定“padding”的值為“20px”。(設定文字對於邊框的距離,可以按照比例適當調整)

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

設定樣式“font-size”的值為“small”。(其他也可以,調整大小即可)

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

設定樣式“line-height”的值為“25px”。(調整行距,適當即可)

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

設定樣式“text-indent”的值為“2em”。(首行縮排2字元)

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

設定樣式“font-family”的值為“微軟雅黑”。(設定字型)

怎麼讓多行文字在div裡顯示的好看些

怎麼讓多行文字在div裡顯示的好看些

時候, 文字, 樣式,
相關問題答案