HTML段落元素中怎么设置空格?HTML空格的设置总结
首先我们先看看html段落元素中是怎么设置空格的:
大家都知道在HTML一个段落中,想把一句话之间多给点距离,就点一个空格,但是在大多数主流浏览器中所有很多的空格就只会显示一个小空格的距离出来,所以在写代码的时候会把空格符号给专门用出来,虽然现在用的空格符号比较少,但是在一些细节处理方面,想留一些空格的时候还是用这个空格符处理是最方便的。
现在我们来看看一个段落元素中空格符的设置:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <p>这里是PHP中文网; 这里是PHP中文网;这里是PHP中文网; 这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网 ;这里是PHP中文网;</p> </body> </html>
上面代码把第一句话后面空了很大的一行,我们想这样和我在后面用的空格符之间的距离谁更大呢?
我们来看看在浏览器中显示的效果图:
我们可以很清楚的看到,第一个是用那么多空格堆出来的空间,在浏览器中只会显示那么一点小空间,后面是空格符显示的效果是不是比自己打空格好多了,空间顿时就大了很多。
当然我们平常肯定不会要空很大的空间的,就算要空的大,那就不会用空格符。今天我们就是讲的空格符 的使用,不说其它的,这个空格符对些懒人来说还是挺好用的。(想看更多就到PHP中文网HTML开发手册栏目中学习)
我们现在再来看看还有两个和 空格符是一样的,我们来看看:
  :“en空格”是根据字体排印学的计量单位命名,宽度是两个普通空格的宽度
  :“em空格”大概是四个普通空格的宽度
都是不影响换行的空格符号。它们的使用比 稍微少一点,因为它们有时候空的空间比较大。
我们再来细看看它们之间的区别:
<body> <p>这里是PHP中文网;   这里是PHP中文网;这里是PHP中文网; 这里是PHP中文网;这里是PHP中 文网;   这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;</p> </body>
在里面加了三种空格符号,我们来看看效果:
三种空格标签,我们看着上面的显示图来给它们排个名次吧,当然网上也有很多人给这个排名的,但是我们自己说自己的,让自己更清楚的知道就行了。
现在我们照着上面的图片我们看看排名情况:
第一名,空的最大的当然是 ,也很明显是把,都是三个空格符,就 最大。
第二名,也就是空的第二大的是 ,这个是空的第二大的,比最后一名的将近大了一倍。
最后一名当然就是我们本章说的 空格符了,虽然空的空间小,但是在某些地方还是很实用的。
好了,今天的这篇关于空格 的文章就到这里了,想学更多就来PHP中文网html参考手册栏目中学习吧。有问题的可以在下方提问。
【小编推荐】
css中的padding属性可以为负值吗?css中padding属性的详解
以上就是HTML段落元素中怎么设置空格?HTML空格的设置总结的详细内容,更多请关注其它相关文章!
推荐阅读
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
watir-webdriver 中根据html5中的data-*属性设置元素
-
HTML中的嵌套的div,子DIV设置的margin样式怎么变成父DIV的样式了_html/css_WEB-ITnose
-
javascript - html中的空格影响js节点操作怎么办?
-
javascript - html中的空格影响js节点操作怎么办?
-
HTML中的嵌套的div,子DIV设置的margin样式怎么变成父DIV的样式了_html/css_WEB-ITnose
-
HTML的元素怎么设置焦点
-
怎么让div中的每一段的每行数据都出现两个空格?_html/css_WEB-ITnose
-
CSS中对图片(background)的一些设置心得总结_html/css_WEB-ITnose
-
HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解