Question

我的科学项目似乎有问题。出于某种原因，在Safari和Firefox（Haven测试Chrome）中，顶部菜单上似乎有填充/边距，iframe似乎工作正常，我现在用div替换它和链接到无处，但文件的顶部并没有，我想是一个顶部边界，我不记得添加它。老实说，我看不出什么是错的。

<!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>Science Project</title>
<style>
html, body {
    margin: 0 0 0 0;
    padding: 0;
        width: 100%;
        height: 100%;
    background-color:#000;
}
div.header {
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
    height: 100px;
    width: 100%;
    font-family:Arial, Helvetica, sans-serif;
    color: #000;
    border-bottom:20px solid #09F;
    border-top-left-radius:12px;
}
p.title {
    padding-top: 20px;
    padding-left:20px;
}
div.menu {
    width:100%;
    height:80px;
    border-bottom-left-radius:12px;
    background-color:#fff;
    border-bottom: 1px solid #000;
}
a.button {
    display:table-cell;
    width:120px;
    height:80px;
    border-bottom-left-radius: 10px;
    background-color:#999;
    text-decoration:none;
    color:#FFF;
    text-align:center;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
    height:calc(100% - 221px);
    width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>

如果你能让我知道我在这里做错了什么，我上次能够让它上班。我发现这很奇怪。

jsfiddle：http://jsfiddle.net/ny4fH/

谢谢！

约什

Answer 1

您正在经历利润率崩溃。

<p class='title'>The Big Bang Theory Explained.</p>

段落默认具有上下边距。这就是问题。您可以使用以下方法阻止保证金崩溃：

.header { overflow: hidden }

或其他花哨的技巧here。 (Fiddle)

Answer 2

你的代码还可以。

请记住重置您使用的标签的值。在这种情况下，它是段落

标签。

p { margin: 0; }

您也可以通过隐藏父（.header）溢出

来避免段落边距

.header { overflow: hidden; }

我似乎无法删除顶部填充或边距，CSS

2 个答案: