Question

我需要删除之间的空格。

我尝试过保证金0，但没有成功。

知道怎么解决吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: transparent;
            width: 1280px;
            height: 720px;
        }

        #content {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 1280px;
            height: 720px;
            outline: 1px solid red;
        }

        ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }

        #bar-header, #bar-footer {
            position: fixed;
            left: 0px;
            width: 1280px;
            height: 30px;
            background-color: darkgray;
        }
        #bar-header {
            top: 0px;
        }

        #bar-footer {
            top: 690px;
        }
        .content-section {
            background-color: lightgray;
            outline: 1px solid black;
            height: 300px;
        }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function start() {
        };
    </script>
</head>
<body onclick="start();">
    <div id="page">
        <div id="bar-header">Header</div>
        <div id="content">
            <div class="content-section">
                <h2>Content 1</h2>
                <a name="section-1"></a>
            </div>
            <div class="content-section">
                <h2>Content 2</h2>
                <a name="section-2"></a>
            </div>
            <div class="content-section">
                <h2>Content 2</h2>
                <a name="section-2"></a>
            </div>
            <div class="content-section">
                <h2>Content 4</h2>
                <a name="section-2"></a>
            </div>
        </div>
        <div id="bar-footer">Footer</div>
    </div>
</body>
</html>

编辑：

我也试过

.content-section { 背景色：浅灰色; 轮廓：1px纯黑色; 身高：300px; margin-bottom：-20px; }

它有效，但我宁愿选择另一种解决方案。

Answer 1

为h2 div

内的content-section标记添加样式

.content-section h2 {
    margin-top: 0px;
}

.content-section:first-of-type h2 {
    margin-top: 27px;
}

JSfiddle

Answer 2

尝试重置CSS

demo

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Answer 3

您可能希望删除h2的边距。最简单的方法是通过内联来删除元素的block性质。

h2 { display:inline-block; }

您可能不需要的另一件事是fixed元素的定位。通过将内容保持为静态高度，可以使用块元素的堆叠来控制定位。您需要做的就是管理overflow以隐藏超出其边界块的内容。这可能是也可能不是您所追求的，但请参阅下面的更改。

Answer 4

使用Vertical-align：top;对于css中的content-section类

         .content-section {
             background-color: lightgray;
             outline: 1px solid black;
             height: 300px;
             vertical-align:top;
          }

如何删除div之间的空格？

4 个答案: