开发的时候很多莫名的间距，比如img，span没写在同一行，它就无耻地出现间隔；
再比如li标签横方向排列加上行级元素的display: inline-block;属性后，li标签没写在同一行，它也无耻地出现间隔。
所以翻阅很多自来资料，这里总结一下解决方法。。。先了解元素属性
块级元素（块级大多为结构性标记）
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
<address>...</adderss> <center>...</center> 地址文字 <h1>...</h1> 标题一级 <h2>...</h2> 标题二级 <h3>...</h3> 标题三级 <h4>...</h4> 标题四级 <h5>...</h5> 标题五级 <h6>...</h6> 标题六级 <hr> 水平分割线 <p>...</p> 段落 <pre>...</pre> 预格式化 <blockquote>...</blockquote> 段落缩进 前后5个字符 <marquee>...</marquee> 滚动文本 <ul>...</ul> 无序列表 <ol>...</ol> 有序列表 <dl>...</dl> 定义列表 <table>...</table> 表格 <form>...</form> 表单 <div>...</div>
行内元素（行内大多为描述性标记）
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
<span>...</span> <a>...</a> 链接 <br> 换行 <b>...</b> 加粗 <strong>...</strong> 加粗 <img > 图片 <sup>...</sup> 上标 <sub>...</sub> 下标 <i>...</i> 斜体 <em>...</em> 斜体 <del>...</del> 删除线 <u>...</u> 下划线 <input>...</input> 文本框 <textarea>...</textarea> 多行文本 <select>...</select> 下拉列表
1.img标签的下边距问题（margin:0、padding:0、border:0 都不能消除的边距）
解决img标签的下边距问题：img:{vertical-align: top;}（改变对齐方式）
2.多个行级元素的右边距问题（margin:0、padding:0、border:0 都不能消除的边距）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> * { margin: 0; padding: 0; border: 0px; background-color: #E0EDD3; } li { list-style: none; display: inline-block; } img { width: 30%; } </style> <body> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <span>span1</span> <span>span2</span> <span>span3</span> <ul> <li>li1</li> <li>li2</li> <li>li2</li> </ul> </body> </html>
我们分行写的时候就出现诡异的右边距，
第一种解决方法：写在同一行。
第二种解决方法：注释掉行之间的空格。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>写在同一行，注释掉行之际间的空格去除边距</title> </head> <style> * { margin: 0; padding: 0; border: 0px; background-color: #E0EDD3; } li { list-style: none; display: inline-block; } img { width: 30%; } </style> <body> <img src="https://www.cnblogs.com/images/logo_small.gif"><!-- --><img src="https://www.cnblogs.com/images/logo_small.gif"><!-- --><img src="https://www.cnblogs.com/images/logo_small.gif"> <span>span1</span><span>span2</span><span>span3</span> <ul> <li>li1</li><li>li2</li><li>li2</li> </ul> </body> </html>
解决市解决了，但是有的编译器格式化代码自动换行，就白搞了，而且代码过长阅读性差，所以上面两个方法不推荐。
第三种解决方法：父类加上font-size: 0;子类分别加上自己对应的font-size: ;属性和值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-size去除边距</title> </head> <style> * { margin: 0; padding: 0; border: 0px; background-color: #E0EDD3; } li { list-style: none; display: inline-block; } img { width: 30%; } .f0{ font-size: 0; } span,li{ font-size: 16px; } </style> <body> <div class="f0"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> </div> <div class="f0"> <span>span1</span> <span>span2</span> <span>span3</span> </div> <ul class="f0"> <li>li1</li> <li>li2</li> <li>li2</li> </ul> </body> </html>
第四种解决方法：浮动去除边距，再父类清除浮动，防止后面不要浮动的元素也被浮动上来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动去除边距</title> </head> <style> * { margin: 0; padding: 0; border: 0px; background-color: #E0EDD3; } li { list-style: none; display: inline-block; } img { width: 30%; } .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clearfloat { zoom: 1 } img,span,li{ float: left; } </style> <body> <div class="clearfloat"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> <img src="https://www.cnblogs.com/images/logo_small.gif"> </div> <div class="clearfloat"> <span>span1</span> <span>span2</span> <span>span3</span> </div> <ul> <li>li1</li> <li>li2</li> <li>li2</li> </ul> <br style='clear:both' /> </body> </html>
也可以单独加浮动每个，最后一个元素不加浮动，也不用父类清除浮动，但是开发过程中元素数量不可控，自己根据实际情况解决吧。
另外清除浮动也可以加<br style='clear:both' />，作用等效类.clearfloat，不过这样添加无用标签。
参考文章：