【在任务四的时候，在main下面的div标签，使用外边距会造成空白 _属性】

在任务四的时候，在main下面的div标签，使用外边距会造成空白

我也踩过这个坑( 3 )

已统计您的踩坑,无需重复点击

回答(1)

属性

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>task11</title>
    <link rel="stylesheet" type="text/css" href="./task11.css">
</head>

<body>
    <!-- ------------头部分开始-------------- -->
    <header>
        <span>关闭</span>
        <span style="font-size:18px; color:white;">登陆</span>
        <span>注册</span>
    </header>
    <!-- ----------头部分结束------------- -->
    <!-- ----------------中间部分开始------ -->
    <main>
        <div>
            <!-- 第一个雪碧图部分 -->
            <div class="phone"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <div>
            <!-- 第二个雪碧图部分 -->
            <div class="lock"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <button>
            <span>登  陆</span>
        </button>
        <a href="#">忘记密码？</a>
    </main>
</body>

</html>
body {
  font-size: 1.6rem;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 44px;
  background-color: #5FC0CD;
}

span {
  display: inline-block;
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 16px;
}

main {
  height: 57.6rem;
  background-color: #EFF0F4;
}

main div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

main div + div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

.phone {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./iphone.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

.lock {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./locked2.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

input {
  height: 22px;
  padding-left: 1.65rem;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  outline: none;
}

button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 5rem;
  margin-top: 3.45rem;
  border: 0;
  background-color: #5FC0CD;
  outline: none;
}

button span {
  font-size: 18px;
}

a {
  display: inline-block;
  margin-top: 8px;
  color: #5FC0CD;
  font-size: 18px;
  float: right;
  text-decoration: none;
}

编辑于2024-04-14

时间排序

热门排序

[北京|结业弟子]JS-顾仁鹏
1

这个问题我刚刚也遇到了，这里涉及到的margin塌陷：由于父级没有设置border，paddin，inline content，他跟第一个子元素之间的margin合并，并且显示出了子元素的margin，这个叫做margin塌陷或者margin折叠。想要解决这个问题就要触发BFC。至于BFC是什么，请自行百度。
触发方式：
1.overflow：hidden、auto、scroll；
2.position不是static也不是relative；
3.float不是none；
4.display是table-cell或inline。
我解决就是给父级加了一个overflow：hidden属性。
我说得可能不够详细，具体请看链接：https://blog.csdn.net/sinat_22996989/article/details/47255541

查看全部>

编辑于2018-11-02

去第页