Header pushing the containing div down from top?

问题

I'm new to stackoverflow and web development altogether. Trying to learn without any help. I'm trying to create a C.V of sorts as part of honing my skills. Here's what happened.

The first div under my containing div is a div with id header. I've fixed my containing div to top with margin: 0 auto; It works fine with no text in my nested div (header) but as soon as I write something in (header) div it pushes the header div down and since header is the first div/element in the containing div, it pushes that down as well.

Here's my HTML:

body {
  margin: 0;
  font: normal 12px/18px'Helvetica', Arial, sans-serif;
  background: #44accf;
}
/* Positioning Rules */

#container {
  width: 900px;
  margin: 0 auto;
}
#header {
  background: #b7d84b;
  height: 50px;
  text-align: center;
  color: #ddd;
  line-height: 50px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Did We?</title>
  <link href="didwe.css" type="text/css" rel="stylesheet" />
</head>

<div id="container">
  <div id="header">
    <h1> Mansoor Zia </h1>	

  </div>
</div>
<!--container-->
</body>

</html>

I'm unable to attach the image here since I'm well the newest member.

回答1:

Add h1{margin:0} to your css and that fixes your problem. Just so you know, unless defined otherwise all text elements have margin which screws around with positioning and sizing :)

回答2:

Each browser sets its value default styles for a variety of HTML-elements. With CSS Reset, we can neutralize this difference to ensure cross-browser style.

use http://cssreset.com

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  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;
}


body {
    margin: 0;
    font: normal 12px/18px'Helvetica', Arial, sans-serif;
    background: #44accf;
}
/* Positioning Rules */
 #container {
    width: 900px;
    margin: 0 auto;
}
#header {
    background: #b7d84b;
    height: 50px;
    text-align: center;
    color: #ddd;
    line-height: 50px;
}

h1 {
    font-size: 20px;
}

<div id="container">
    <div id="header">
        	<h1> Mansoor Zia </h1>	
    </div>
</div>

回答3:

Here the solution http://jsfiddle.net/hovru6qh/

* {
    padding: 0;
    margin: 0;
}

You need to reset all padding and margin

回答4:

You forgot the opening

<body>

-tag, could be that.

Also, instead of using

margin: 0 auto;

to get it to stick to the top of the page, try using

top: *margin to top*(0 = sticks to top without margin)

回答5:

Margins inside of block elements will - by default - overflow bi-directionally vertically when the element with the margin is set to display in inline-block or inline (h1 elements display in inline by default).

To fix this without changing the margin of your H1 text, but fixing the header to not be effected by it (as it shouldn't), add overflow: auto to the CSS of your header.

A Fiddle is here for you:

Bi-directional margin overflow fiddle

Good luck!

回答6:

Some of the other answers seem a bit misleading so I decided to create this one to outline the problem for you.

The problem is called margin collapsing, you can read about it a little here.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

A fix for this would be to remove the default margin on the <h1> tag, see an example below.

body {
  margin: 0;
  font: normal 12px/18px'Helvetica', Arial, sans-serif;
  background: #44accf;
}
#container {
  width: 900px;
  margin: 0 auto;
}
#header {
  background: #b7d84b;
  height: 50px;
  text-align: center;
  color: #ddd;
  line-height: 50px;
}
h1 {
  margin: 0; /* Added this */
}

<div id="container">
  <div id="header">
    <h1> Mansoor Zia </h1>	
  </div>
</div>

来源：https://stackoverflow.com/questions/31811635/header-pushing-the-containing-div-down-from-top

标签

html

css

margins