标题从顶部推下包含的div？ [英] Header pushing the containing div down from top?
问题描述
我是一个完全不熟悉stackoverflow和web开发的人。试图没有任何帮助学习。我试图创造一种类似的C.V作为我的技能磨练的一部分。这是发生了什么。
我包含div下的第一个div是一个ID header 的div。我已经解决了我的包含div顶部保证金：0自动; 它工作正常，没有文本嵌套 div （header），但只要我在（header） div 中写入一些内容，它就会将头部 div header是包含 div 中的第一个 div /元素，它也将它推下。
以下是我的 HTML ：
body {margin：0; font：normal 12px / 18px'Helvetica'，Arial，sans-serif;背景：＃44accf;} / *定位规则* /＃容器{宽度：900px; margin：0 auto;}＃header {background：＃b7d84b; height：50px; text-align：center;颜色：#ddd; line-height：50px;}
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"><html lang =en> ;< HEAD> < meta http-equiv =content-typecontent =text / html; charset = utf-8> < title>我们是否< / title> < link href =didwe.csstype =text / css =stylesheet/>< / head>< div id =container> < div id =header> < H1> Mansoor Zia< / h1> < / DIV>< / DIV><！ - 容器 - >< / BODY>< / HTML>
我无法附加图片，因为我是最新的会员。
在您的css中添加 h1 {margin：0} 并解决您的问题。只是你知道，除非另有定义，否则所有的文本元素都有余量，并有定位和大小的限制：）
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.
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 :)
这篇关于标题从顶部推下包含的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
