Question

这应该是一个简单的问题，但我找不到答案。在创建单列html / css设计时，元素之间会有垂直的空间，我无法解释。

部分之间出现空格，可以通过将部分上边距设置为-20px来移动，但这种方法不是必需的。任何帮助将不胜感激。

代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body {
            padding:0;
            background-color: #888888;
            width:800;

            margin-top:0;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:0;
            display:block;
            vertical-align:0;
        }

        section {
            display:block;
            margin-top:0px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:0;

            padding-top:0;
            padding-left:20px;
            padding-right:20px;
            padding-bottom:20px;

            background-color: #CCCCCC;
            width:760px;
        }

        article {
            margin:0;
            padding:0;
            background-color: #EEEEEE;
        }
    </style>
    <title>Title</title>
</head>
<body>

    <section>
        <h2> Section 1 </h2>
        <article>
            <p> Text here.
            </p>
        </article>
    </section>
    <section>
        <h2> Section 2 </h2>
        <article>
            <p> Text here.
            </p>
        </article>
    </section>
</html>

Answer 1

额外的保证金来自您的<h2>

Answer 2

此保证金来自您的h2标题的浏览器默认css（用户代理样式）。您可以通过将边距设置为零来摆脱它。

h2 {
     margin-top: 0;
}

Answer 3

你可以使用normalize css摆脱这个问题 https://github.com/necolas/normalize.css/ 此normalize.css将规范化所有浏览器默认样式表

删除垂直空间html

3 个答案: