Question

我是stackoverflow和web开发的新手。试着在没有任何帮助的情况下学习。我正在努力创造一种C.V作为磨练我技能的一部分。这就是发生的事情。

包含div的第一个div是一个ID为header的div。我已将我的包含div修改为顶部margin: 0 auto;它在我的嵌套div（标题）中没有任何文本工作正常但是只要我在（标题）div中写入内容它就会推送标题div向下，因为标题是包含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

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

使用http://cssreset.com

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

此处为解决方案http://jsfiddle.net/hovru6qh/

* {
    padding: 0;
    margin: 0;
}

您需要重置所有填充和边距

Answer 4

你忘记了开场

<body>

-tag，可能是那个。

此外，而不是使用

margin: 0 auto;

让它坚持到页面顶部，尝试使用

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

Answer 5

当display或inline-block或inline h1中具有边距的元素设置为inline时，块元素内的边距（默认情况下）会垂直向上溢出默认情况下，元素显示在margin中。

要解决此问题而不更改H1文本的overflow: auto，但修改标题不受其影响（因为它不应该），请将#!/bin/bash CMD() { echo "#TST# `date` CMD: $1" } CMD "ntpq -pn | awk '{ printf "%s %s\n", $9,$10 }'"添加到您的CSS中头。

小提琴就在这里：

Bi-directional margin overflow fiddle

祝你好运！

Answer 6

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

问题称为保证金折叠，您可以稍微阅读here。

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。

对此的修复方法是删除<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>

标题从顶部推下包含div？

6 个答案: