两个元素为display:inline-block,之前存在的空格解决方法!

今天练习写面包屑导航,遇到的一个问题,和大家分享一下!代码如下:

.breakCrumb {  list-style: none;}.breakCrumb > li {  display: inline-block;}.breakCrumb > li + li:before {  content: "/";  color: #ccc;  padding: 0 5px;}

<ul class="breakCrumb">  <li>首页</li>  <li>新品</li>  <li>夏季</li>  <li>冬节</li></ul>

出来的效果如下:

发现我明明只为分隔符加了左右padding为5px,怎么前面的空白会多出一段?而且审查元素并没有任何显示!

解决办法如下:

问题原因:此空白为:代码的换行空格!!

1.把代码行的空格全部删除,可解决

2.将display:inline-block,换成float:left可解决

3.在元素把font-size设为0,再在子元素里再设置文字大小,也可解决

.breakCrumb {  list-style: none;  font-size:0;}.breakCrumb > li {  display: inline-block;  font-size:16px;}