Header 将包含 div 从顶部向下推？

Question

我完全不熟悉 Whosebug 和 Web 开发。在没有任何帮助的情况下尝试学习。作为磨练我的技能的一部分，我正在尝试创建某种 C.V。事情是这样的。

我包含的 div 下的第一个 div 是一个 ID 为 header 的 div。我已经修复了我的包含 div 到 margin: 0 auto; 的顶部它在我的嵌套 div (header) 中没有文本的情况下工作正常但是一旦我在 (header) div 它将 header div 向下推，因为 header 是包含 div 的第一个 div/ 元素，它也将其推低。

这是我的 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>

由于我是最新会员，因此无法在此处附上图片。

Answer 1

将 h1{margin:0} 添加到您的 css 即可解决您的问题。就像你知道的那样，除非另有定义，否则所有文本元素都有边距，它会影响定位和大小:)

Answer 2

这里是解决方案http://jsfiddle.net/hovru6qh/

* {
    padding: 0;
    margin: 0;
}

您需要重置所有内边距和边距

Answer 3

每个浏览器都为各种 HTML 元素设置其值默认样式。通过 CSS Reset，我们可以抵消这种差异以确保跨浏览器的风格。

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

Answer 4

你忘了开头

<body>

-标签，可能是那个。

另外，不用

margin: 0 auto;

要使其固定在页面顶部，请尝试使用

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

Answer 5

当带有边距的元素在 inline-block 或 inline 中设置为 display（h1 元素默认显示在 inline 中。

要在不更改 H1 文本的 margin 的情况下修复此问题，但修复 header 使其不受其影响（因为它不应该），请将 overflow: auto 添加到header 的 CSS。

Fiddle 为您而来：

Bi-directional margin overflow fiddle

祝你好运！

Answer 6

其他一些答案似乎有点误导，所以我决定创建这个答案来为您概述问题。

这个问题叫做margin collapsing，你可以稍微读一下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.

解决此问题的方法是删除 <h1> 标签上的默认边距，请参见下面的示例。

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>

Header 将包含 div 从顶部向下推？

Header pushing the containing div down from top?

html

css

margins