产生的原因主要是由图片的垂直对齐方式vertical-align引发的，默认对齐方式为base-line；
解决方案：
1、将图片的垂直对齐方式vertical-align更改为 bottom；
2、将图片display设置为block，并且指定width 和 height；
3、设置图片所在的容器元素的width和height与图片一样。
二、当hover效果加边框时移动的问题
解决方案：给原始状态加一个透明边框
三、浮动问题
问题：子级元素的浮动，为父层元素所带来的影响，如果一个元素的所有子级内容都是浮动的，那么它的高度会变成 0；
解决方案：
1、设置父容器高度
2、设置父元素的 overflow:hidden
3、在父元素中，增加一个空元素，添加clear:both
问题：如果上面元素浮动的话可能会影响下面的元素，这时候可以给下面的元素加上一个清除浮动：clear：both/left/right,或者在这个元素之前加一个空元素，清除浮动。
这是样式的问题, 按照html规范, 一般的无论插入多少个空格(包括换行), 都当作一个空白字符来处理. 所以连着写的和换行的视觉表现是不同的.为了突出对比, 我举例如下:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<style>
.myNav {
margin-bottom: 10px
}
.myNav a{
display: inline-block
padding: 10px
text-decoration: none
background-color: #eee
}
</style>
</head>
<body>
<h5>html代码换行了</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a>
<a href=""><span>待付款</span></a>
<a href=""><span>待发货</span></a>
<a href=""><span>待收货</span></a>
<a href=""><span>待评价</span></a>
</div>
<h5>html代码没换行</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a><a href=""><span>待付款</span></a><a href=""><span>待发货</span></a><a href=""><span>待收货</span></a><a href=""><span>待评价</span></a>
</div>
</body>
</html>
不过, 通常我们会进行换行, 这样代码更具可读性. 如果因为换行导致的样式不是自己想要的, 例如对于样式display: inlin-block的元素, 会出现一个间隙. 这时候需要通过自己来调整样式达到预期效果. 有如下方式消除间隙:
方式1: 通过设置父元素的字体. 这种方式只是为了更好的说明为什么有空隙, 通常不要按这个办法那样做. 此外不同浏览器表现略有差异.
.myNav {margin-bottom: 10px
font-size: 0 /* 将父元素字体大小设为0, 消除换行造成的间隙 */
}
.myNav a{
display: inline-block
padding: 10px
text-decoration: none
background-color: #eee
font-size:13px /* 子元素重新设定字体大小 */
}
方式2: 使用float. 此方法能够兼容老旧浏览器.
.myNav {margin-bottom: 10px
}
.myNav a{
display: block /* 将子元素设为block */
float: left /* 使用float */
padding: 10px
text-decoration: none
background-color: #eee
}
/* 别忘了为父元素清除浮动 */
.myNav::after{
content:""
display: block
clear: both
}
方式3: 使用flex布局. 推荐做法, 但是老旧浏览器不兼容.
.myNav {margin-bottom: 10px
display: flex /* 使用flex */
}
.myNav a{
padding: 10px
text-decoration: none
background-color: #eee
}
以上是常见做法.另外要说的是, 大部分情况我们不需要消除这个间隙. 比如要子元素看起来是连续的, 可以设置父元素的背景等.
