请问为什么图片之间有缝隙？怎么设置footer里面的整体居中？设置margin没有用吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .header{
        width: 100%;
        height: 100px;
        background: black;
        overflow: hidden;
        zoom: 1;
        position: fixed;
    }
    .logo{
        height: 100px;
        width: 300px;
        float: left;
    }
    .nav{
        float: right;
        color: #fff;
        overflow: hidden;
        zoom: 1;
    }
    .nav li{
        float: left;
        margin-right: 60px;
    }
    .nav li a{
        padding: 0 0;
        height: 100px;
        line-height: 100px;
        font-family: '黑体';
        font-size: 24px;
        color: #fff;
    }
    .nav li a:hover{
        color: #acacac;
    }
    .main{
        width: 100%;
        height: auto;
        padding-top: 100px;
    }
    .picture{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .picture img{
        width: 100%;
        height: 100%;
    }
    .footer{
        width: 100%;
        height: 100px;
        background: black;
        position: fixed;
        bottom: 0px;
        left: 0px;
    }
    .nav1{
        margin: 0 auto;
        color: #fff;
        overflow: hidden;
        zoom: 1;
    }
    .nav1 li{
        float: left;
        margin-right: 80px;
    }
    .nav1 li a{
        padding: 0 0;
        height: 100px;
        line-height: 100px;
        font-family: '黑体';
        font-size: 24px;
        color: #fff;
    }
    .nav1 li a:hover{
        color: #acacac;
    }
  </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
        </div>
        <ul class="nav">
            <li><a href="#">课程</a></li>
            <li><a href="#">职业路径</a></li>
            <li><a href="#">实战</a></li>
            <li><a href="#">猿问</a></li>
            <li><a href="#">手记</a></li>
        </ul>
    </div>
    <div class="main">
        <div class="picture"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
        </div>
        <div class="picture"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
        </div>
        <div class="picture"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
        </div>
    </div>
    <div class="footer">
        <ul class="nav1">
            <li><a href="#">网站首页</a></li>
            <li><a href="#">企业合作</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">友情链接</a></li>
        </ul>
    </div>
</body>
</html>

慕UI4371066 2019-02-17

源自：CSS网页布局基础 2-7 编程练习

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2019-02-18 11:13:04

同学你好，1、这是图片本身的距离，可以给图片设置display属性去除，例：

2、可以把li设置为行内块，且设置左右相等的外边距，给footer设置文字居中属性。例:

3、建议：页脚也是有固定定位，脱离文档流的，与上个区域有重合，建议：可以给上个区域在设置下内边距，例：

希望能帮助到你，欢迎采纳。

祝学习愉快！

收起回答

慕UI4371066 提问者 #1

谢谢！还想咨询下，为什么设置了浮动之后，使用左右margin为auto来居中就无效了呢？

2019-02-18 20:29:40
好帮手慕糖回复提问者慕UI4371066 #2

你好，这里是因为浮动脱离文档流导致的哦。脱离当前的文档流，变换到容器的边缘，或是另一个浮动box的边缘。所以margin:auto;无效。祝学习愉快！

2019-02-19 09:45:30