下边距问题

来源:5-4 编程练习

慕慕9452826

2018-11-22 22:42:51

这个行与行之间有分裂开,怎样合并起来

http://img.mukewang.com/climg/5bf6c0630001bb3213170550.jpg

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    html,body{

    margin: 0;

    }

    #h1 {

    background-color: lightblue;

    height: 260px;

    width: 90%;

    margin: 70px;/*边距*/


    }

    #h2{

    background-color: pink;/*背景*/

    height: 120px;

    width: 90%;

    margin: 70px;

    }

    .img1,.img2{

    float: left;/*向左浮动*/

    margin-left: 160px;/*左边距*/

    margin-top: 23px;/*上部边距*/

    }

    .img3,.img4,.img5{

    float: left;/*向左浮动*/

    margin-left: 150px;

    margin-top: 30px;

    }

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div id="ym">

  <div id="h1">

  <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" alt="" class="img1">

  <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" alt="" class="img2">

  </div>

  <div id="h2">

  <img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt="" class="img3">

  <img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt=""class="img4">

  <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt="" class="img5">

  </div>

  </div>

</body>

</html>


写回答

1回答

好帮手慕查理

2018-11-23

您好,由于#h1和#h2中的margin:70px;造成的。由于margin设置的是四个边的外边距,那么也就是包括上下边距的。因此在设置之后,上半部分底部添加70px,下半部分上边添加70px,也就出现了间隙。将margin设置去除即可。祝学习愉快!

0

0 学习 · 4928 问题

查看课程