html css中文字段落,css中文字行间距怎么设置？

在网页的布局中几大段文字挤在一起总归是不好看的，这时候我们就需要来设置行间距来让文字看起来不拥挤，也让整个页面看起来美观整洁，那么，行间距该如何设置呢？本篇文章就来给大家介绍一下css行间距的设置方法。

首先我们应该知道在css中并没有直接可以设置行间距的属性，所以我们就需要借助行高line-height来设置行间距，行高line-height的值越大，那么行间距就越高。

Line-height的值设置为具体的数值，可以是相对数值，也可以设置为绝对数值，在静态页面中，文字大小固定时常常使用绝对数值，而对于论坛和博客这些用户可以自定义字体大小的页面，通常设置为相对数值，从而，可以随着用户自定义的字体大小改变相应的行间距。

下面我们就来看看css中利用行高line-height来设置行间距的代码示例：

.small {

line-height: 70%;

}

.big {

line-height: 200%;

}

.length {

line-height: 50px;

}

这是一个标准行高的段落。
这是一个标准行高的段落。

大多数浏览器的默认行高约为110%至120%。

这是一个更小行高的段落。
这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更大行高的段落。
这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个固定行高的段落。
这是一个固定行高的段落。

这是一个固定行高的段落。

效果图：

html css中文字段落,css中文字行间距怎么设置？相关推荐

html怎么设置文字段落,第3章用HTML设置文字与段落.ppt
第3章用HTML设置文字与段落第3章用HTML设置文字.段落 GGAO CM WTU 学习目标输入文字设置文字的格式设置段落的格式水平线的标记创建列表使用marquee设置滚动效果 ...
html css中文字段落,css段落文字（中英文混杂）实现两端对齐
今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求.一般情况下还是不推荐使用的,毕竟使用了几句js. 案例如下: 混合使用汉字和英文的段落默认如下: 两边是不对齐的(一般情况下,我们对这种情 ...
php中控制段落的行距,CSS段落间距调整 P标签段落距离如何设置
CSS对P段落之间间隔距离调整如何设置解决篇在网页中文章段落一般我们用html 标签进行分段,使用P标签上一段文章与下一段文章中间就会产生距离,如何控制P与P之间间距呢?接下来DIVCSS5为大家全 ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
html文字段落设置,css中怎么设置段落样式？
段落是文章的基本单位,也是网页的基本单位.段落的放置与效果的显示会影响到页面的布局和风格.CSS样式提供了多种属性,来实现对页面中段落文本的控制. css设置段落样式的方法: 对齐方式通过 text- ...
html 在盒子中字体垂直,第五章,css行内盒模型和文字样式
一,盒模型发现默认样式,会破坏布局,比如p标签的默认样式 p标签默认样式从图片中我们可以看到我们并没有加margin值,可是左边依然有空隙出现,这就是p标签的默认样式,那我们怎么去掉一些会破坏我们 ...
html中加艺术字体,CSS实现漂亮的大标题文字效果
CSS实现漂亮的大标题文字效果 10月 22, 2013 评论 (6) Sponsor 现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来 ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
在html中写竖着的文字,css实现文字竖排效果示例代码
在word.excel中可以轻松的实现文字竖排的形式,但是在html页面中呢?现今我有了这种需要,我想要的效果如下: 复制代码代码如下: 这不是被美工嵌在的文字,而是通过div加上的,该当如何来实现此 ...

html css中文字段落,css中文字行间距怎么设置？

html css中文字段落,css中文字行间距怎么设置？相关推荐

最新文章

热门文章