Question

我正在尝试使用带有背景图片的标头标签以及里面的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

有什么建议吗？

鲍勃

Answer 1

这些都是保证金问题。例如，H1标签顶部的边距会导致页面顶部的空间。添加内联样式将删除该空间。

<h1 style="margin-top:0px"></h1>

边距也会导致您的全宽度问题将您的身体边距设置为0px。

<body style="margin:0px"></body>

我想你明白了。您可以通过右键单击并在Chrome中选择“检查元素”来解决这些问题。当您突出显示不同的标签时，它将以不同的颜色显示元素的边距，边框和填充，以便您了解正在发生的事情。

Answer 2

header未使用全宽，因为body元素上有边距或填充。你可以删除：

body { margin: 0; padding: 0; }

（你需要删除这两个，因为有些浏览器使用填充而不是边距。）

这也会让你的文字完全消失，这不是很漂亮，所以你想要一个保证金：

#lipsum { margin: 0 10px; }

在h1元素之外使用h2和header元素的边距的原因称为margin collapsing。您可以使用overflow样式：

，而不是使用边框来阻止它

header { overflow: hidden; }

Answer 3

使用CSS重置它将解决您的许多问题。 http://meyerweb.com/eric/tools/css/reset/

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

如何 - 使标题跨度全宽并位于页面顶部

3 个答案: