图片之间为什么会有间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
width: 100%;
height: 100px;
position: fixed;
background: black;
}
aside{
float: left;
height: 100px;
}
aside img{
margin-right: 50px;
}
article{
float: right;
height: 100px;
line-height: 100px;
}
a{
text-decoration: none;
color: white;
font-size: 20px;
font-weight: bold;
margin-right: 20px;
}
a:hover{
color: red;
}
section{
padding-top:100px ;
width: 100%;
}
section img{
width: 100%;
}
footer{
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background: black;
line-height: 100px;
}
footer .center{
margin: 0 auto;
width: 1000px;
text-decoration: none;
}
footer .center a{
margin-left: 50px;
}
.img2{
position: relative;
/* top: -5px; */
}
</style>
</head>
<body>
<header>
<nav>
<aside>
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" >
</aside>
<article>
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</article>
</nav>
</header>
<section>
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" >
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" class="img2">
</section>
<footer>
<div class="center">
<a href="#">职业路径</a>
<a href="#">职业路径</a>
<a href="#">职业路径</a>
<a href="#">职业路径</a>
<a href="#">职业路径</a>
<a href="#">职业路径</a>
</div>
</footer>
</body>
</html>
正在回答
你好，
1、图片之间的间隙：因为图片是内联元素，有文字特性，默认存在间隙，所以会有这种效果。可以将图片设置成块元素，如下：
2、底部导航项没有水平居中显示：
导航项设置的左右间距不同，建议父容器不设置固定宽度，设置左右相同间距，直接居中显示即可，参考：
3、效果视频中中间部分是三张图片哦，可以完善一下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星