Question

我在这个部分上方有一个奇怪的空白 - 身体中的一个div。

这是：

不明白为什么，我甚至将CSS重置为默认值，* { margin: 0;}

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="js/jquery-3.0.0.min.js"></script>

</head>

<body>
    <div id='section-one'>
        <div id='headline'>
            <h1> This is the headline </h1>
                <div class='silver-line-break'>
                </div>
                <div id='fee-estimate-box'>
                    <form id='fee-estimate-form' action="#">
                            <legend>Delivery Fee Calculator</legend>
                            <span>First name: </span> <input type="text" name="firstname" value="Mickey">
                            <span>Last name: </span> <input type="text" name="lastname" value="Mouse">
                            <input type="submit" value="Submit">
                    </form>
                </div>
                <div class='silver-break-bar'>
                    <img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
                </div>
        </div>
    </div>
</body>
</html>

CSS

/* Basic Styles */
* {
   margin-top:  0px;
   padding: 0;
}
body {
    padding: 0px;
    margin: 0px;
    background-color: pink;
}

#section-one {
    background-color:  #80be05;
    margin: 0px;
    padding: 0px;
}

为什么在section-one的{{1}} div之上有空格的任何想法？

更新：我已添加了要求的完整代码。不确定是什么问题？这与我的Chrome浏览器有关吗？

Answer 1

H1有一些像素的余量。

h1 {
  margin: 0px
}

如何摆脱体内div上方的空白

1 个答案: