两个元素为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;
}