css - Div 即使有边距 :0 and padding:0; 也有边距

标签 css html

我的网页上有四个 div;页眉、菜单、内容和页脚。在 IE 中,所有内容都正确嵌套显示,但在 Chrome 中,页脚与菜单和内容 div 之间有一个小间隙。我试过把

margin:0;
padding:0;

一切都没有改变。这是我的问题的一些图片:

在 Chrome 中(显示不正确):

enter image description here

在IE中(正确显示):

enter image description here

为什么会这样?这是我的 HTML:

<?php include "headermysql.php"?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script type = "text/javascript">
function to_login_page()
{
window.location.assign("http://127.0.0.1/sxp/login.php");
}
function to_signup_page()
{
window.location.assign("http://127.0.0.1/sxp/signup.php");
}
</script>
<link rel = "stylesheet" type = "text/css" href = "textstyles.css">
</head>
<body>
<?php include "headerhtml.php";?>
<div class = "menu">
<p>menu</p>
</div>
<div class = "content">
<?php
//irrelevant PHP 
?>
<a class = "main" href = "post.php">Post new topic</a>
</div>
<div class = "footer">
<p class = "footer">Copyright Stafford King 2013</p>
</div>
</body>
</html>

这是我的 CSS:

.error
{
font-weight:bold;
font-family:Courier New;
color:red;
text-align:left;
font-size:20px;
margin:0;
padding:0;
}
.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:black;
margin:0;
padding:0;
}
a.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:#000066;
margin:0;
padding:0;
}
a.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:#000066;
margin:0;
padding:0;
}
p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
}
div.header
{
height:150px;
background-color:#008AC8;
margin:0;
padding:0;
}
div.menu
{
float:left;
width:200px;
height:800px;
background-color:#64BCE2;
margin:0;
padding:0;
}
div.content
{
height:800px;
background-color:#F9F9D9;
margin:0;
padding:0;
}
div.footer
{
height:20px;
background-color:#008AC8;
margin:0;
padding:0;
}
h2.main
{
font-family:Cambria;
font-size:35px;
color:black;
text-align:center;
margin:0;
padding:0;
}
.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:black;
margin:0;
padding:0;
}
body{margin:0;}

抱歉发了这么长的帖子。感谢所有帮助。

最佳答案

<p> 可能有问题部分在页脚中,因为您的页脚高度为 20px,内部字体为 15px,但 <p>我认为默认有一些边距顶部和底部。您应该将其设置为 0px;

p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
margin:0px;
}

关于css - Div 即使有边距 :0 and padding:0; 也有边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16835092/

相关文章:

html - 如何让文本显示在顶部而不是侧面?

html - CSS 网格移动元素而不是重叠 z-index

javascript - Bootstrap 轮播图像未加载

css - Chrome 中 CSS 颜色属性的默认值是多少?

html - 失焦时选区的背景颜色会发生变化

css - 字符串很长的移动网络应用程序

html - box-shadow 隐藏,不在上方

html - CSS data-content 属性转义反斜杠

html - 无法使 CSS 按钮可点击

javascript - JSON 渲染为 HTML,仅包含最后一个 <li> 元素