关于边距的问题

来源：5-4 自由编程

weixin_慕仰4083625

2019-12-05 21:27:29

<div class="footer">
  <div class="container">
      <div class="footer-item">
       <ul class="footer-item-ul">
        <li class="fl">关于慕淘</li>
        <li class="fl">合作伙伴</li>
        <li class="fl">营销中心</li>
        <li class="fl">廉正举报</li>
        <li class="fl">联系客服</li>
        <li class="fl">开放平台</li>
        <li class="fl">诚征英才</li>
        <li class="fl">联系我们</li>
        <li class="fl">网站地图</li>
        <li class="fl">法律声明</li>
        <li class="fl">知识产权</li>
       </ul>
      </div>     
      <div class="footer-copy">&copy;2017 imooc.com All Rights Reserved</div>
  </div>
 </div>

.footer{
 width: 100%;
 background-color: #f3f5f7;
 height: 100px;
}
.container {
    width: 1200px;
    margin: 0 auto;
}
.footer-item{
 width: 705px;
 margin:30px auto;
 font-size: 12px;
}
.footer-item-ul li{
 display: inline-block;
 margin-left: 15px;
}
.footer-copy{
 font-size: 12px;
 text-align: center;
 margin-top: 20px;
}

.fl{
  float:left;
  }

为什么margin设置的边距都没显示出来？

写回答

1回答

好帮手慕慕子

2019-12-06

同学你好，对于你的问题解答如下：

margin-top是生效了的，但是由于第一个子元素设置margin-top会影响到父元素。具体可以参考如下解释：根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠，说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦，只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin，防止它越级，把自己的margin当成领导的margin执行。
建议修改：不给外层设置固定的高度，让其由子元素内容撑开高度，然后设置相同的上下内边距，消除父子元素上边距重叠的现象，同时实现内容垂直居中显示。
因为列表项li设置了左浮动，脱离文档流，导致版权信息与其在一行显示。
建议：已经给li设置了inline-block；属性，让其在一排显示。可以去除浮动，
然后调整li的左右间距相同，最后给ul添加text-align属性，实现内容水平居中显示
调整后的效果图：

如果帮助到了你，欢迎采纳，祝学习愉快~

0 学习 · 14456 问题

查看课程

相似问题

关于边距的问题

回答 1

关于层级覆盖的问题

回答 2

老师问个问题关于text-align;

回答 2

关于floor的html显示问题

回答 3

关于教学服务天数的问题

回答 1

打开慕课网App查看更多内容