解决行内元素中间有空隙得意 产生原因：换行符、tab、空格产生空隙 解决方法： 1.元素写成一行 存在问题：代码混乱
<span href="#" class="page-prev"><</span><span href="#" class="page-current">1</span><a href="#">2</a><a href="#">3</a>2.在根容器里设置font-size:0; 子容器里设置font-size:14px;（推荐）
因为 font-size 是一个会继承的属性，当父容器定义了这个属性，下面的子元素（孙元素）都会继承这个属性。视频的例子中，当为外面容器div添加 font-size:0 的时候，div下面的所有 span 和 a 标签都继承了这个样式，字体大小变为了 0px，所以看不到任何数字内容了；当为其它类添加 font-size:14px 后，这个属性覆盖了父容器继承下来的属性（CSS的后来居上原则），因此 div 下的 span 和 a 标签里的数字内容就恢复了正常。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页页码</title> <style> .page-normal{ color:#ff6500; text-align: center; font-size:0; margin-top:200px; } .page-normal a,.page-normal .page-current,.page-normal .page-prev{ padding:5px 7px; font-size:14px; margin-left:10px; } .page-normal a{ border:1px solid #ff9600; color:#ff6500; text-decoration:none; } .page-normal a:hover{ border:1px solid #ff6500; background-color:#ffbe94; } .page-normal .page-current{ border:1px solid #ff6500; color:#ff6500; background-color:#ffbe94; } .page-normal .page-prev{ border:1px solid #ffe3c6; color:#ffe3c6; } .ellipsis{ font-size:14px; border:none; margin-left: 8px; } </style> </head> <body> <div class="page-normal"> <span href="#" class="page-prev"><</span> <span href="#" class="page-current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <span class="ellipsis">...</span> <a href="#">200</a> <a href="#">201</a> <a href="#">></a> </div> </body> </html>