老师，请问为什么我图片中间有间隙，怎么解决？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
width: 1600px;
height: 100px;
background-color: black;
margin: 0 auto;
position: fixed;
left: 150px;
}
.img {
width: 300px;
height: 100px;
background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png);
float: left;
}
.option {
color: white;
float: right;
font-size: 25px;
line-height: 100px;
}
ul {}
.option li {
list-style: none;
display: inline;
margin-right: 50px;
}
.container {
width: 1600px;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 100px;
}
.container table{
border-collapse: collapse;
}
.footer{
width: 1600px;
margin:0 auto;
background-color: black;
height: 100px;
color: white;
font-size: 25px;
position: fixed;
bottom: 0px;
right: 150px;
}
.footer ul{
width: 900px;
line-height: 100px;
margin: 0 auto;
}
.footer li{
list-style: none;
display: inline;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="img"></div>
<div class="option">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<table>
<tr><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></tr>
<tr><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"></tr>
<tr><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"></tr>
</table>
</div>
<div class="footer">
<ul>
<li>网页首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>117
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2019-06-11 11:03:17
同学你好， 图片的间隙是因为img标签自带间距导致的， 建议： 可以为img标签设置display：block;属性消除间距
代码实现中还有以下几个问题需要注意一下
1、根据练习要求， 需要全屏显示， 你这里直接设置固定的宽度， 由于电脑分辨率不同，在你的电脑上看着是全屏的， 但是在其他电脑上打开不是全屏显示的， 建议修改: 可以给最外层元素设置百分百宽度， 另， 可以不用设置顶部的left属性和底部的right属性
2、图片不设置的宽度的时候， 会以自身的大小显示， 建议修改： 可以给图片设置百分百宽度， 让其充满父级元素
3、页脚内容在整体居中上有误差， 因为你这里让ul整体居中， 但是你给li设置的左外边距， 导致第一个li与ul的左侧没有间距， 最后一个li与ul的右侧有间距， 导致整体水平有误差， 建议修改： 可以调整li的左右外边距一样， 给ul设置text-align:center;实现居中
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星