我正在尝试使用带有背景图片的标头标签以及里面的H1和H2标签。
标题不在页面顶部 - 如何让它位于顶部？
标题未填满整个宽度 - 如何让它填满整个宽度？
示例：http://www.bobnovell.com/headertest.html
我还想消除H1和H2之间的空白行。我尝试了行高：0px，它消除了H1和H2之间的空间，但是标题的高度减小了，因此H1伸出标题上方，H2伸出标题下方。
示例：http://www.bobnovell.com/headertest_1.html
另一个转折 - 如果我定义边框：1px为实心红色，则标题移近顶部，标题的高度足以包含H1和H2。
问题是 - 我不希望标题上有边框。
http://www.bobnovell.com/headertest_2.html（此页面可能显示旧版本而非当前版本 - 我的托管公司存在某种问题。如果您看到H1周围的边框而不是标题，请等待并重新加载 - 问题似乎在一段不确定的时间后自行解决）
但是等等，如果我将边框的颜色设置为白色，则会消除可见的边框，但必须有一些方法可以让它在没有定义边框的情况下正确显示。
http://www.bobnovell.com/headertest_3.html
有什么建议吗？
鲍勃
答案 0 :(得分：0)
这些都是保证金问题。例如，H1标签顶部的边距会导致页面顶部的空间。添加内联样式将删除该空间。
<h1 style="margin-top:0px"></h1>
边距也会导致您的全宽度问题将您的身体边距设置为0px。
<body style="margin:0px"></body>
我想你明白了。您可以通过右键单击并在Chrome中选择“检查元素”来解决这些问题。当您突出显示不同的标签时，它将以不同的颜色显示元素的边距，边框和填充，以便您了解正在发生的事情。
答案 1 :(得分：0)
header未使用全宽，因为body元素上有边距或填充。你可以删除：
body { margin: 0; padding: 0; }
（你需要删除这两个，因为有些浏览器使用填充而不是边距。）
这也会让你的文字完全消失，这不是很漂亮，所以你想要一个保证金：
#lipsum { margin: 0 10px; }
在h1元素之外使用h2和header元素的边距的原因称为margin collapsing。您可以使用overflow样式：
header { overflow: hidden; }
答案 2 :(得分：0)
使用CSS重置它将解决您的许多问题。 http://meyerweb.com/eric/tools/css/reset/
/* 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;
}
h1 {
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: center;
font-size: 50px;
}
h2 {
font-weight: normal;
text-transform: none;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
font-style: italic;
font-size: 20px
}
header {
border: 10px #FF0000 solid;
border-width: 0px;
background: url("http://www.bobnovell.com/images/white_brick_wall_@2X.png") repeat scroll center top;
display: block;
}
<header><!-- style="height: auto">-->
<h1>H1</h1>
<h2>H2</h2>
</header><!--</div>-->
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet
mattis mattis. Cras non lacus turpis. Vivamus auctor erat a tempus gravida.
Morbi in porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Pellentesque sed orci non est volutpat
semper vel laoreet magna. Aliquam tempus enim eros, lacinia ultricies massa
volutpat non. Integer tristique placerat hendrerit. Vivamus gravida est
ante, at varius arcu rhoncus eget. Mauris pretium semper nisl, non viverra
risus molestie sit amet. Morbi diam libero, malesuada ac consectetur vel,
porta in sem. Aliquam posuere fringilla tortor eget fringilla. Vestibulum
condimentum, orci vel varius tincidunt, justo lectus semper metus, non
pulvinar eros enim ut elit. </p>
<p>Sed purus arcu, euismod eu elit vel, tristique scelerisque leo. Curabitur
vehicula aliquet ligula sed venenatis. Aliquam euismod euismod cursus.
Vestibulum aliquam ut justo et imperdiet. Duis vehicula scelerisque dictum.
Donec aliquet leo quis hendrerit condimentum. Aliquam eu sapien nec lacus
tempus accumsan vitae at nisi. Mauris arcu urna, commodo vel scelerisque
eget, convallis vel elit. Suspendisse sit amet feugiat ex, eu tempus orci.
</p>
<p>Vestibulum ultrices vulputate nibh. Nullam sit amet libero vitae diam
porta imperdiet. Maecenas et eros at risus mattis dictum eu et quam.
Pellentesque vel magna sed orci eleifend ultricies sed eget orci. Nullam
pharetra, ligula at egestas ornare, arcu enim volutpat mauris, eu lacinia
ante felis nec elit. Fusce ac rutrum nunc, a faucibus dui. Mauris consequat,
ante at sollicitudin vestibulum, metus diam placerat felis, sit amet
condimentum lectus leo ac orci. Etiam tellus purus, vehicula nec ipsum id,
scelerisque efficitur sem. Praesent aliquam neque urna, sed finibus diam
placerat sed. Donec tristique tincidunt est, fermentum facilisis tortor.
Vestibulum nec nibh vestibulum, semper arcu eget, accumsan sapien. Nulla ac
luctus turpis, eu egestas ex. Aliquam sed arcu non dui volutpat maximus sed
ac magna. Ut eros neque, faucibus a lacus eu, faucibus tempus ex. Nulla
eleifend elit ac lacus gravida condimentum facilisis eu urna. </p>
<p>Nulla non placerat ante. Quisque ac dui dolor. Duis sit amet risus
mauris. Nullam laoreet ipsum sit amet libero consequat, non eleifend dui
mollis. Proin ullamcorper, elit auctor auctor vestibulum, magna justo auctor
ipsum, eu egestas neque risus eget massa. Nam feugiat tortor ac urna ornare,
at egestas enim scelerisque. In efficitur rutrum tellus non scelerisque.
Morbi consequat et metus ut finibus. </p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam
fringilla, massa id molestie dictum, neque ipsum aliquet nisi, pellentesque
molestie mauris lectus in ex. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nullam vitae eros eros. Praesent eget libero sit amet
ligula fringilla rutrum vel id quam. Etiam vestibulum condimentum justo,
quis luctus lectus tempus ac. In hac habitasse platea dictumst. Phasellus
feugiat pharetra lectus, quis dignissim nunc tincidunt ut. </p>
</div>