Я не могу удалить верхний отступ или поля, CSS

0

Кажется, у меня проблема с моим научным проектом. По какой-то причине в Safari и Firefox (не проверял 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/

Благодарю!

мистифицировать

Теги:

2 ответа

3
Лучший ответ

Вы испытываете крах.

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

Пункты, по умолчанию, имеют верхнее и нижнее поле. Это проблема. Вы можете предотвратить крах с:

.header { overflow: hidden }

Или другие причудливые трюки, описанные здесь. (Fiddle)

1

ваш код в порядке.

Не забудьте сбросить значения используемых вами тегов. В этом случае это был абзац

тег.

p { margin: 0; }

Вы также можете избежать краев абзацев, скрывая переполнение родительского (.header)

.header { overflow: hidden; }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню