Question

我正在构建一个非常简单的网站，以便在基本的HTML和CSS中刷新自己。我正在使用Dreamweaver CS6。我希望以“正确”的方式学习每个方面。我认为我可以使用边距将div移动到我想要的位置（向上或向下），但我不确定这是否是实现它的正确方法。

这是一个例子。我拍了一张截图。

http://i.imgur.com/YyYpfcz.png

容器div的标题和顶部之间存在间隙。内容div与页眉和页脚div之间存在间隙。

如何让这些div相互冲洗，消除差距？谢谢！

注意：我已经研究过这个网站上与此类似的其他问题，但没有一个是这个，也没有他们的答案以最基本的形式解决这个问题。

编辑：每个人都说他们的方式是正确的，有很多不同的答案。这让我很困惑。而且我没有得到他们每个帖子的答案。我很好奇为什么这些div默认情况下不会相互冲洗。我将在网站后期创建更多div。如果我不明白为什么你的方法有效，我将无法在网站上的更多div上实现它。谢谢！

Answer 1

这是因为有默认样式，你使用

h1{margin: 0px;padding: 0px;}

可以解决它。

我建议您按

重置所有默认样式

*{margin: 0px;padding: 0px;}

还有更多重置css，我可能会看到enter link description here

了解更多详情：）

Answer 2

不完全确定你在寻找什么。 obvs你还需要玩弄东西。但看看这对你来说是否是一个好的开始。我添加了background color来显示各个部分。你可以删除。

http://jsfiddle.net/NbP4x/1/

这是一个关于制作第一个网站的好教程 - 使用Dreamweaver。从这里开始吧。 :) http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Answer 3

是的，Eric Meyer重置是“正确的方法”之一，比使用*

更好

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
<title>North Carolina Golf Car Dealers</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#container {
     width: 960px;
     margin: 0 auto;
}
</style>
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Header goes here.</h1>
         </div>
         <div id="content">
            <p>Content goes here</p>
         </div>
         <div id="footer">
            <p>Footer goes here.</p>
         </div>
     </div>
</body>
</html>

理想情况下，您应该使用外部样式表将HTML和CSS分开：

所以HTML：index.html（例如）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
<title>North Carolina Golf Car Dealers</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>Header goes here.</h1>
         </div>
         <div id="content">
            <p>Content goes here</p>
         </div>
         <div id="footer">
            <p>Footer goes here.</p>
         </div>
     </div>
</body>
</html>

和CSS：style.css（例如）

@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#container {
     width: 960px;
     margin: 0 auto;
}

注意：我从：

更改了CSS #container

    #container {
     width: 960px;
     margin-right: auto;
     margin-left: auto

为：

    #container {
     width: 960px;
     margin: 0 auto;
}

将margin-right和margin-left组合在一起（两种方式都可以工作......）

Answer 4

看起来这是一个行高问题，而不是div之间的空格。尝试为div添加边框，看看它们是否触摸。

div { 边框：1px纯黑色; }

Answer 5

我认为这是'p'的特点，尝试删除div＃内的'p'，我认为差距可以删除。

如何删除CSS中div之间的空白区域？

5 个答案: