如何删除div之间的空间？答案

【问题标题】：How to remove space between divs?如何删除div之间的空间？
【发布时间】：2014-09-15 22:52:51
【问题描述】：

我需要删除 .

之间的空格

我已经尝试使用边距 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；边距底部：-20px； }

它有效，但我宁愿选择其他解决方案。

【问题讨论】：

重复：stackoverflow.com/questions/18508442/…
你有一些问题，试着把窗口变小，看看滚动条会发生什么

标签： html css

【解决方案1】：

在content-section div 内为h2 标签添加样式

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

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

JSfiddle

【讨论】：

对我来说搞砸了页眉/页脚对齐
试试我的更新，页眉看起来不错，但我不知道页脚。
认为是 iPad 问题。甚至选择的答案也有类似的问题。

【解决方案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;
}

【讨论】：

【解决方案3】：

使用垂直对齐：顶部；用于你的 CSS 中的 content-section 类

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

【讨论】：

【解决方案4】：

您可能想要删除h2 的边距。要做到这一点，最简单的方法是通过使其内联来移除元素的 block 特性。

h2 { display:inline-block; }

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

【讨论】：