HTML段落元素中如何设置空格
更新:HHH   时间:2023-1-7


HTML段落元素中如何设置空格?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

首先我们先看看html段落元素中是怎么设置空格的:

大家都知道在HTML一个段落中,想把一句话之间多给点距离,就点一个空格,但是在大多数主流浏览器中所有很多的空格就只会显示一个小空格的距离出来,所以在写代码的时候会把空格符号给专门用出来,虽然现在用的空格符号比较少,但是在一些细节处理方面,想留一些空格的时候还是用这个空格符处理是最方便的。

现在我们来看看一个段落元素中空格符的设置:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天达云</title>
</head>
<body>
<p>这里是天达云;                                       这里是天达云;这里是天达云;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这里是天达云;这里是天达云;这里是天达云;这里是天达云;这里是天达云
;这里是天达云;</p>
</body>
</html>

上面代码把第一句话后面空了很大的一行,我们想这样和我在后面用的空格符之间的距离谁更大呢?

我们来看看在浏览器中显示的效果图:

我们可以很清楚的看到,第一个是用那么多空格堆出来的空间,在浏览器中只会显示那么一点小空间,后面是空格符显示的效果是不是比自己打空格好多了,空间顿时就大了很多。

当然我们平常肯定不会要空很大的空间的,就算要空的大,那就不会用空格符。今天我们就是讲的空格符&nbsp的使用,不说其它的,这个空格符对些懒人来说还是挺好用的。(想看更多就到天达云HTML开发手册栏目中学习)

我们现在再来看看还有两个和&nbsp空格符是一样的,我们来看看:

&ensp; :“en空格”是根据字体排印学的计量单位命名,宽度是两个普通空格的宽度

&emsp; :“em空格”大概是四个普通空格的宽度

都是不影响换行的空格符号。它们的使用比&nbsp稍微少一点,因为它们有时候空的空间比较大。

我们再来细看看它们之间的区别:

<body>
<p>这里是天达云;&ensp;&ensp;&ensp;这里是天达云;这里是天达云;&nbsp;&nbsp;&nbsp;这里是天达云;这里是PHP中
文网;&emsp;&emsp;&emsp;这里是天达云;这里是天达云;这里是天达云;这里是天达云;</p>
</body>

三种空格标签,我们看着上面的显示图来给它们排个名次吧,当然网上也有很多人给这个排名的,但是我们自己说自己的,让自己更清楚的知道就行了。

现在我们照着上面的图片我们看看排名情况:

第一名,空的最大的当然是&emsp;,也很明显是把,都是三个空格符,就&emsp;最大。

第二名,也就是空的第二大的是&ensp;,这个是空的第二大的,比最后一名的将近大了一倍。

最后一名当然就是我们本章说的&nbsp;空格符了,虽然空的空间小,但是在某些地方还是很实用的。

感谢各位的阅读!看完上述内容,你们对HTML段落元素中如何设置空格大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注天达云行业资讯频道。

返回web开发教程...