我们在编写html标签的时候，通常会使用换行，缩进来保证代码的可读性。同时，在编写css样式的时候，也会需要把一些元素设置为inline或inline-block。这样一来，有时在页面中会出现意外的空白间隙导致页面视图与本意不符。
先来了解一下出现空白间隙的原因吧！因为内联元素默认排版中有空白间隙，以此来把每一个内联元素独立分开，这里的空白间隙也就是空白的文本节点，在缩进代码时会占据宽度，所以就导致了意外的空白间隙。
那么接下来为大家提供三种解决方法
1.去掉两个HTML标签中的空白，也就是去掉换行，使两个标签紧紧挨在一起，去除了标签中的空白文本节点，也就去除了空白间隙。
这种方法通常可以解决问题，但同时会使代码可读性下降，降低代码整洁度，偶尔使用影响不会太大。
2.为元素设置letter-spacing属性，letter-spacing属性允许使用负值，这会让字母之间挤得更紧。
这种方法也可以算是一种解决方式，不过更多的还是用来设置字符的间距。
3.为内联元素的父元素添加font-size属性，并设置为0，找到需要清除空白的内联元素，将内联元素的父元素的font-size属性设置为0就可以了，不过别忘了在内联元素中重新设置对应的font-size值。
这个方法是最推荐的，也是最常用的方法，可以很好处理空白间隙问题。
vue框架开发出现页面空白、白屏的解决方法总汇
使用Vue-cli脚手架开发单页应用时出现页面空白的情况：1.npm run build打包页面空白，2. iOS的Safari下无法打开网页，3.升级vue2+部分手机访问出现页面空白，4.升级vue2+IP访问页面空白，5.Vue在IE下显示空白问题，6.Vue只在iOS 10出现白屏问题
如何微信小程序禁止下拉_解决小程序下拉出现空白的情况
在微信小程序中，用力往下拉动，页面顶部会出现一段空白的地方。 产品的需求不太允许这么做，会影响用户体验，查看文档发现可以使用enablePullDownRefresh这属性来实现，但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢？
html页面body与div之间产生空白解决方法
在做一个页面输出时发现body与div之间出现20px左右高度的空白，尝试多种方法无解，尤其是方法1也解决不了，后来发现原来是html文件编码格式问题造成的！css初始化,解决不了，就将html文件格式保存为utf-8编码格式，即问题完美解决
彻底搞懂CSS文本、空白换行问题
本文前提：文本的父容器是块级元素。首先，我们来整理一下与换行有关的3个CSS属性：word-break该属性决定文本内容超出容器时，浏览器是否自动插入换行符。word-wrap（overflow-wrap）该属性决定浏览器是否应该在一个无法正常断开的单词内部插入换行符。
Android WebView 加载H5页面空白问题
在Android开发过程中，经常需要使用WebView加载一些H5页面，但有时会出现页面加载失败的情况，今天就探讨下如何解决页面加载空白的问题：
HTML中6种空白空格
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌‍）在不同浏览器中宽度各异。
前端性能优化之白屏时间
该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。白屏时间：即用户点击一个链接或打开浏览器输入URL地址后
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!