先来看几个例子

例子1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5. </head>
  6. <body>
  7.     这是             空格
  8. </body>
  9. </html>

显示效果：
image.png

例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div style="width: 100px; height: 100px;background-color: red;">helloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div>
</body>
</html>

显示效果
image.png
我们发现在这两个例子当中，第一个例子两个文字之间有那么多空格，但是在浏览器中显示缺只有一个空格，这是为什么呢？ 第二个例子，div容器的宽高100，里面的文字却溢出了div，这是什么原因.

空格在HTML中的含义

空格在HTML中并不是表示空格的意思，而是表示文本分割符。如例子2所示，这一连串的英文浏览器并不认识这到底是一个单词还是多个单词，所以当你把英文单词写在一起的时候，浏览器就会认为这是一个单词将他们显示在一起。所以我们要给它们加上空格
<div style="width: 100px; height: 100px;background-color: red;">helloworld helloworld helloworld helloworld</div>
加上文本分割符之后，显示的效果：
image.png

那如果我非要展示空格呢？有个特殊的东西叫做HTML编码
由&开头，；结尾。中间填写内容
 表示的就是空格的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好
</body>
</html>

显示效果
image.png