margin
div css布局中段落使用<p>標籤，對於段落的上下左右的空白（縮排）可以使用margin標籤定義樣式。margin有上、下、左、右四個方向的定義，正常情況下，我們可以用一行來描述我們需要的樣式。
例如：margin: 20px 8px 8px 20px;
此句分別表示了：margin-top；margin-right；margin-bottom；margin-left。
四個數值的順序分別是：上、右、下、左。是依時12:00開始的順時針方向。
如何上下的值一致，左右的值一致，我們可以再進行最佳化。
可以寫成：margin:20px 8px;
此句分別表示了：上下、左右。
對於段落內部的文字對齊，一般用text-align，比如：text-align: center;等。
下面以執行個體的形式來看不同的段落排版：
| 代碼如下 | 複製代碼 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> <!-- div { width:500px; background:#ccc; } p { border:1px solid red; background:#fff; } #p1 { margin: 20px 8px 8px 20px;/*上。右。下。左*/ text-align:center; } #p2 { margin: 20px 8px;/*上下。左右*/ text-align:right; } #p3 { margin: 20px;/*四邊均是*/ text-align:left; } --> </style> </head> <body> <div> <p id="p1"> - Div CSS布局 段落布局方法</p> <p id="p2"> - Div CSS布局 段落布局方法</p> <p id="p3"> - Div CSS布局 段落布局方法</p> </div> </body> </html> |
|
padding
對於段落內部的空白，我們可以用padding來實現。padding的一些屬性與margin類似，這裡就不再重複。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
