1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <div>
  13.     <span>Hello</span>
  14.     <!-- 这两者之间会出现一个空白 -->
  15.     <span>World</span>
  16.   </div>
  17. </body>
  19. </html>

空白处理

如上案例，其实我们写代码为了可读性时常使用Tab缩进、Enter换行和Space空格来整理代码的结构，而这也是正确的代码规范
但对于代码的解析来说，这些都属于多余的空白，因此当HTML运行在浏览器时，会将这些连续的空白变成一个空白，这也就会导致一些标签之间会出现意料之外的间隙（换行符和缩进替换成空白造成的效果）
而这就是空白处理以及空白处理造成的影响

解决空白处理造成的影响

  1. 通过margin-left属性用负值解决
  2. 如果文本位于子元素中，且空白出现于父元素中，父元素可通过font-size:0属性消除空格，但由于font-size属性的继承性需要注意子元素的字体大小
  3. 如果文本位于该元素，且空白出现于该元素中，该元素可通过word-spacing:0px属性控制空格大小