我正在构建一个非常简单的网站，以用基本的 HTML 和 CSS 刷新自己。我正在使用 Dreamweaver CS6。我希望以“正确”的方式学习各个方面。我认为我可以使用边距将 div 移动到我想要的位置（向上或向下），但我不确定这是否是实现它的正确方法。
这是一个例子。我截图了。
http://i.imgur.com/YyYpfcz.png
标题和容器 div 的顶部之间有一个间隙。内容 div 与页眉和页脚 div 之间存在间隙。
如何使这些 div 彼此齐平以消除间隙？谢谢！
注意：我已经研究了该站点上与此类似的所有其他问题，但没有一个完全是这样，他们的答案也没有以最基本的形式解决这个问题。
编辑：得到了一堆不同的答案，每个人都说他们的方式是正确的。这让我很困惑。而且我没有得到他们最初发布的每个帖子的答案。我很好奇为什么这些 div 默认情况下不相互齐平。稍后我将在站点中创建更多 div。如果我不明白为什么您的方法有效，我将无法在网站上的更多 div 上实施它。谢谢！
不完全确定您在寻找什么。你仍然需要玩弄一些东西，obvs。但看看这对你来说是不是一个好的开始。我添加background color以显示这些部分。你可以删除。
这是制作您的第一个网站的一个很好的教程 - 使用 Dreamweaver。从这里开始，伙计。:) http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
这是因为有默认样式，你使用
h1{margin: 0px;padding: 0px;}
可以修复它。
我建议您通过以下方式重置所有默认样式
*{margin: 0px;padding: 0px;}
以及更多重置 css，我可能会看到在此处输入链接描述
更多细节:)
Yes the Eric Meyer reset is one of the 'right ways' to do it, much better than using the *
<!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>
Ideally you should keep the HTML and CSS separate by using an external style sheet:
So the HTML: index.html (for example)
<!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>
and the CSS: style.css (for example)
@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;
}
Note: I changed your CSS #container from:
#container {
width: 960px;
margin-right: auto;
margin-left: auto
to:
#container {
width: 960px;
margin: 0 auto;
}
combining the margin-right and margin-left (both ways work...)
看起来这是一个行高问题，而不是 div 之间的空格。尝试为 div 添加边框，看看它们是否接触。
div {边框：1px纯黑色；}
我觉得是'p'的特性，试着去掉div#content里面的'p'，我觉得可以去掉gap。