为什么标题<h1> </h1> <h2>等在文本周围创建了额外的空间？</h2>

Question

这就是Dreamweaver中的样子，以及我希望它看起来如何

这就是浏览器视图中的结果

Answer 1

添加

margin:0;
padding:0;

在CSS中。您的浏览器默认提供元素边距/填充，您必须明确删除它们。

Answer 2

我发现很好的方法是为所有浏览器重置CSS，所以它看起来更多/更少。有很多例子，所以这里有一个：

html, body, blockquote, code, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0
}
button, fieldset, form, input, legend, textarea, select {
    margin:0;
    padding:0
}
fieldset {
    border:0
}
a, a * {
    cursor:pointer
}
div {
    margin:0;
    padding:0;
    background-color:transparent;
    text-align:left
}
hr, img {
    border:0
}
applet, iframe, object {
    border:0;
    margin:0;
    padding:0
}
button, input[type=button], input[type=image], input[type=reset], input[type=submit], label {
    cursor:pointer;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
strong {
    font-weight:bold;
}
em {
    font-style:italic;
}

Answer 3

标题标记采用网页上的默认边距和填充。 在标题标签上使用margin：0和padding：0。

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

Answer 4

我尝试在另一个宽度有限的元素中包含一个标题时遇到了类似的问题。似乎当你限制元素的宽度时，它会在标题内容之前将默认换行符添加为等效的空格。

设置边距和填充对文本放置没有任何影响，但阻止空格包装换行解决了问题。

h1 {
    white-space: nowrap;
}