老师，为什么我图片中间有空隙，用margin-bottom：none不行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:100%;color:white;}
.one{background-color:black;position:fixed;width:100%;height:100px;}
ul{list-style:none;}
.three{width:200px;height:80px;float:left;}
.two{float:right;display:inline;line-height:100px;}
.two li{margin-right:20px;display:inline;}
div .five{margin-top:100px;}
.four{margin-bottom:none;}
.six{background-color:black;width:100%;height:100px;text-align:center;line-height:100px;}
.six li{display:inline;padding:0 20px;}
/*此处写代码*/
</style>
</head>
<body>
<div><div class="one">
<img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" class="three">
<div class="two">
<ul>
<li>课程
</li>
<li>职业路径
</li>
<li>职业路径
</li>
<li>职业路径
</li>
<li>职业路径
</li>
</ul>
</div>
</div>
<div class="four">
<img src="http://img1.sycdn.imooc.com\/climg/58c0eda50001e12416000480.jpg" class="five">
<img src="http://img1.sycdn.imooc.com\/climg/58c0edb80001c9f216000480.jpg">
<img src="http://img1.sycdn.imooc.com\/climg/58c0edc9000100d516000480.jpg">
</div>
<div class="six">
<ul>
<li>以为所以</li>
<li>以为所以</li>
<li>以为所以</li>
<li>以为所以</li>
<li>以为所以</li>
<li>以为所以</li>
</ul>
</div>
<!-- 此处写代码 -->
</body>
</html>9
收起
正在回答
2回答
同学你好，问题解答如下：
1.这个不是默认的margin , 图片的间隙是因为img标签换行导致的 ,行内标签就会有这一个现象。所以像下面的同学所说，把图片转换为块元素即可。
2.另外，图片太大，在分辨率小的情况下，会出现横向滚动条，建议图片设置宽度100%。
3.导航定位之后，不设置位置。默认在原位置显示。当页面中元素设置间距往下移动，他默认位置也会变化。所以需要设置top:0 。
整体代码修改如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星