css字间距（如何用CSS设置网页中文字上下行之间的间距）

本文目录

• 如何用CSS设置网页中文字上下行之间的间距
• css设置字体间距
• 怎样使用CSS设置文字与文字间距距离
• CSS如何设置英文字母之间的间距_html/css_WEB-ITnose
• CSS中如何设置单词的间距
• CSS如何设置文字之间的间隔_html/css_WEB-ITnose
• 怎么在页面中设置css文字的间距为20p
• div+css中如何控制字的上下间距

如何用CSS设置网页中文字上下行之间的间距

用CSS设置网页中文字上下行之间的间距，首先我们需要理解的是一个行高和高的概念，可以通过这个p或者是其他的标签添加一个height和line-height，然后设置相应的数值，就能够实现上下行的间距设置，具体看下代码：
《html》
《head》
《style》
#div{
width:400px;
height:300px;
}

#div p{
line-height:30px;
}
《/style》
《/head》
《body》
《div id=’div1’》
《p》我是测试文字《/p》
《/div》
《/body》
《/html》

css设置字体间距

• 01

  先看下我们的html代码，很简单，就是一个div里有一段文字，我们为这个div添加了一个样式 zn

• 02

  默认情况下，不加任何样式时，这段文字的间距是很小的，如图

• 03

  为了添加文字的间距，我们可以添加letter-spacing的样式，添加一个zn的样式名，样式代码为 letter-spacing: 12px;就是每个文字间会有12像素的间距。

• 04

  再运行页面，就可以看到效果了。文字间的间距明显加大了。

怎样使用CSS设置文字与文字间距距离

letter-spacing:10px; //设置标签下的文字间距为10px

定义和用法

letter-spacing 属性增加或减少字符间的空白（字符间距）。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

注释：允许使用负值，这会让字母之间挤得更紧。

CSS如何设置英文字母之间的间距_html/css_WEB-ITnose

CSS如何设置英文字母之间的间距:
在之前章节中已经介绍过如何使用CSS控制字的间距，下面再介绍一下如何控制英文字母之间的间距。代码实例如下:
蚂蚁部落 ul li{ font-size:12px; list-style:none;}.first{letter-spacing:4px;}.second{letter-spacing:8px;}.third{letter-spacing:12px;} I am a good student I am a good student I am a good student
以上代码可以设置单词字母之间的间距。
***隐藏网址***
***隐藏网址***

CSS中如何设置单词的间距

CSS用word-spacing属性来设置单词的间距。例如：

《html》
    《head》
        《style type="text/css"》
            p.spread {word-spacing: 30px;}
            p.tight {word-spacing: -0.5em;}
        《/style》
    《/head》
    《body》
        《p class="spread"》This is some text. This is some text.《/p》
        《p class="tight"》This is some text. This is some text.《/p》
《/body》
《/html》

效果如图：

可以看到，word-spacing属性既可以使单词间距变小，也可以变大。

对于中文，CSS区分不出来词，使用letter-spacing属性调节字之间的间距。

你的例子里，你需要把要调节间距的字符放到同一个标签内部，比如《p》《/p》中。如果不同标签之间的距离，用margin(外边距）或padding（内边距）都可以。

CSS如何设置文字之间的间隔_html/css_WEB-ITnose

CSS如何设置文字之间的间隔:在通常情况下都是使用文字的默认间距，但是有时候也要认为的设置文字之间的间距，下面就通过实例代码介绍一下如何实现此效果，代码如下:
蚂蚁部落.txt{ letter-spacing:40px;}蚂蚁部落欢迎您
以上代码实现了我们的要求，使用letter-spacing属性即可实现，关于此属性可以参阅CSS的letter-spacing属性一章节。
***隐藏网址***
***隐藏网址***

怎么在页面中设置css文字的间距为20p

1、首先新建一个html文件，命名为test.html，在test.html文件内，使用p标签创建一行文字，文字内容为“这是一段测试的文字”。

2、然后在test.html文件内，设置p标签的class属性为txt，主要用于下面通过该class来设置css样式。

3、接着在test.html文件内，编写《style type="text/css"》《/style》标签，页面的css样式将写在该标签内。

4、在test.html文件内，在css标签内，以“.类名”的形式来设置p标签的样式。

5、在css标签内，使用letter-spacing属性设置文字的间距，间距值的单位可以是px，rem，cm等css单位。例如，这时设置文字间隔为20px。

6、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。

div+css中如何控制字的上下间距

css字体上下间距，即控制两行文字垂直距离的。在CSS中，line-height被用来控制行与行之间垂直距离。

不过，行间距与半行间距，还是取决于CSS中的line-height。

默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。可以定义line-height属性来覆盖初始值：p｛line-height:140%｝

可以有5种方式来定义line-height。

1.line-height可以被定义为：body{line-height:normal;}

2.line-height可以被定义为：body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字， body{line-height:1.2}

缩写line-height

那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：《font-size》/《line-height》

实例：body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;}

视图：line-height设置的几种方式，有些CSS属性是可继承的（inherited），从层叠的元素里传递下来。这样做是为了方便开发者，不再为后代元素重新设值。

1、百分比

2、长度

3、值：normal

4、纯数字