本文介绍了CSS Margin：0未设置为0的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是网页设计的新来者。我使用CSS和HTML创建了我的网页布局如下。问题是即使我将边距设置为0，上边距不设置为0，并留下一些空间。如何清除这个空白？
$ b
样式工作表
< style type =text / css>
body {
margin：0 auto;
background：＃F0F0F0;}
#header {
background-color：＃009ACD;
height：120px;}
#header_content {
width：70％;
background-color：＃00B2EE;
height：120px;
margin：0 auto;
text-align：center;}
#content {
width：68％;
background-color：#EBEBEB;
margin：0 auto;
padding：20px;}
< / style>
HTML
< body>
< div id =header>
< div id =header_content>
< p> header_content< / p>
< / div>
< / div>
< div id =content>
主要内容
< / div>
< / body>
以下是整个文件：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/ DTD / xhtml1-transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>书店< / title>
< style type =text / css>
html，body，#header {
margin：0！important;
padding：0！important;
}
body {
margin：0; padding：0;
background：＃F0F0F0;}
#header {
background-color：＃009ACD;
height：120px;}
#header_content {
width：70％;
background-color：＃00B2EE;
height：120px;
margin：0 auto;
text-align：center;}
#content {
width：68％;
background-color：#EBEBEB;
margin：0 auto;
padding：20px;}
body {
margin：0;
padding：0;
}
< / style>
< / head>
< body>
< div id =header>
< div id =header_content>
< p> header_content< / p>
< / div>
< / div>
< div id =content>
主要内容
< / div>
< / body>
< / html>
解决方案
请尝试...
body {
margin：0;
padding：0;
}
。
由于浏览器使用不同的默认样式表，有些人建议您使用重置样式表=http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/> Eric Meyer的重置重新载入。
I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?
Screen Shot of the problem
Style Sheet
<style type="text/css">
body{
margin:0 auto;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
</style>
HTML
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
Here's the whole file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
margin: 0 !important;
padding: 0 !important;
}
body{
margin:0; padding: 0;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
</html>
解决方案
Try...
body {
margin: 0;
padding: 0;
}
Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.
这篇关于CSS Margin：0未设置为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！