css修改段落间距

html-css09

css修改段落间距,第1张

首先，你要明确css的可视化盒子模型——里面任何元素的显示都是盒子。元素分为块元素和内联元素。块元素的显示是这样的：沿页面垂直向下排列，每个盒子都尽可能的宽，除非限制盒子宽度，否则这个块元素的内容将充满这个页面。标签<p>是块元素，所以段落是以每个p为块，沿页面排列的。

其次，段落与段落之间的距离就是两个盒子之间的距离。调整盒子之间的距离要调整盒子的margin属性。

最后，margin属性在设置上下距离也就是垂直距离的时候，一定要注意重叠问题。就是两个盒子的垂直距离取上边盒子的margin-bottom和下边盒子的margin-top中的最大值！。而水平排列的盒子的水平距离的话，是左边盒子margin-right和右边盒子的margin-left之和！。切记。

望采纳!

1、使用数值来设置行间距

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>使用数值来设置行间距</title>

<style type="text/css">

p.small {

line-height: 0.5

}

p.big {

line-height: 2

}

</style>

</head>

<body>

<p>

这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。

</p>

<p class="small">

这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

</p>

<p class="big">

这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

</p>

</body>

</html>

line-height是改变一大段文字里，每一行的距离的。

有3种设定行高的方法：

数字

长度单位

比例

用数字设行距

B { font-size: 12pt

line-height: 2 }

当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。

用长度单位设定行距

B { font-size: 12ptline-height: 11pt }

（em及pt是最常用的长度单位）

用比例设定行距

B { font-size: 10ptline-height: 140% }

在本例中，行距是长度10points的140％，即14points。