标准网页中用CSS进行段落排版的方法
[ 来路：21kn.com 时间：2007-7-7 21:13:33 点击： ]
符合标准网页中用DIV CSS如何对段落进行排版的？通过这篇教程你就会有所了解
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>21kn.com</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">21kn.com - Div CSS布局 常见问题</p><p id="p2">21kn.com - Div CSS布局 常见问题</p><p id="p3">21kn.com - Div CSS布局 常见问题</p></div></body></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
padding
对于段落内部的空白，我们可以用padding来实现。padding的一些属性与margin类似，这里就不再重复。我们看下面的例子：
<!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>21kn.com</title><style type="text/css"><!-- div { width:500px; background:#ccc;}p { border:1px solid red; background:#fff;}#p1 { margin: 20px 8px 8px 20px;/*上。右。下。左*/ padding-top:20px;/*距离上部20象素*/ text-align:center;}#p2 { margin: 20px 8px;/*上下。左右*/ padding-bottom:20px;/*距离下部20象素*/ text-align:right;}#p3 { margin: 20px;/*四边均是*/ text-align:left; padding:20px 0;/*距离上下部各20象素*/}--></style></head><body><div><p id="p1">21kn.com - Div CSS布局 常见问题</p><p id="p2">21kn.com - Div CSS布局 常见问题</p><p id="p3">21kn.com - Div CSS布局 常见问题</p></div></body></html>
：：：：站长友情提示：多花一分钟学点什么都好：：：：
上一篇：优化代码：网页技术CSS的font属性的缩写的技巧 下一篇：CSS实现排版段落前面空两个字，不使用空格
= = 免责声明 = =
① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。 ② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。 ※联系方式：Airtofly@163.com
：：推荐文章：：
：：图像设计：：
Copyright © 2007 21kn.com Inc. All rights reserved.e天下网络工作室
网站白天客服QQ：26875416 (非24小时) 合作QQ：597004688 粤ICP备06026423号
