I can't seem to remove the top padding or margin, CSS

Question

I seem to be having an issue with my Science project. For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.

<!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>

If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.

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

Thanks!

Josh

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

You are experiencing margin-collapse.

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

Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:

.header { overflow: hidden }

Or other fancy tricks described here. (Fiddle)

edited May 23 '17 at 12:20

Community

1
1

answered Mar 25 '14 at 00:04

bjb568

11,089
11
50
71

score 1 · Answer 2 · answered Mar 25 '14 at 00:10

1

your code is ok.

Just remember to reset values of the tags you use. In this case it was the paragraph

tag.

p { margin: 0; }

You can as well avoid paragraphs margins by hiding the parent (.header) overflow

.header { overflow: hidden; }

answered Mar 25 '14 at 00:10

cR0Ck

13
2
4

I can't seem to remove the top padding or margin, CSS

2 Answers2