Как удалить верхний край на веб-странице?

у меня была эта проблема с каждой веб-страницы, которую я создал. Всегда есть верхний край над div "main container", который я использую для размещения своего контента в центре страницы. Я использую таблицу стилей css и установил поля и отступы в теле в 0px и установил поля и отступы в 0 в div:

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

div.mainContainer{
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

Я смотрел онлайн много раз, но все, что я могу видеть, это установить эти атрибуты полей и отступов. Есть то, что я должен делать? Этот маржа существует в IE и Firefox.

вот более тщательный взгляд на код (он находится в начальной стадии создания, поэтому в нем мало что есть...)

<!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" />
        <!-- TemplateBeginEditable name="doctitle" -->
        <title></title>
        <!-- TemplateEndEditable -->
        <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
        <link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="mainContainer">
            <p>Here is the information</p>
        </div>
    </body>
</html>

вот CSS:

@charset "utf-8";
/* CSS Document */

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
    position: relative; 
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

div.header{
    padding: 0; 
    margin: 0;
}

div.leftSidebar{
    float: left;
    width: 22%; 
    height: 40em;
    margin: 0;
}

div.mainContent{
    margin-left: 25%;
}

div.footer{
    clear: both;
    padding-bottom: 0em; 
    margin: 0;
}

/* Hide from IE5-mac. Only IE-win sees this. */
   * html div.leftSidebar { margin-right: 5px; }
   * html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
16 52
html css

16 ответов:

У меня была аналогичная проблема, она была решена следующим CSS:

body {    
    margin: 0 !important;
    padding: 0 !important;
}
47

- Это первый элемент h1 или похожие? Этот элемент margin-top может быть причиной того, что кажется маржей на body.

79

лучший способ сбросить поля для всех элементов-использовать правило CSS asterisk.

добавьте это в верхнюю часть вашего css под @ charset:

* {
   margin: 0px;
   padding: 0px;
}

это уберет все заданные поля и отступы со всеми элементами body, h1,h2,p и т. д. Теперь вы можете сделать верхний или верхний колонтитул вашей страницы заподлицо с браузером вместе с любыми изображениями или текстом в других divs.

24

многие элементы в CSS имеют отступы по умолчанию и поля, установленные на них. Поэтому, когда вы начинаете строить новый сайт, всегда хорошо иметь готово. Добавьте это, чтобы сделать руб значения по умолчанию, так что у вас есть больше контроля над вашей веб-страницы.

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}


/* Extra options you might want to consider*/

table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { 
    border:0;
}

Я надеюсь, что это помогает всем коллегам-разработчикам это то, что прослушивало для меня некоторое время, когда я учился.

10

Вы можете предотвратить последствия маржа рушится С:

body { overflow: hidden }

Что делать body поля остаются точными.

9

у меня была такая же проблема. Было принято решение на следующую строку в CSS;

h1{margin-top:0px}

мой главный div содержал h1 тег в начале.

4

у меня была аналогичная проблема. Я хотел процентную высоту и верхнюю границу для моего контейнера div, но тело будет принимать на себя край контейнера div. Я думаю, что нашел решение.

вот мой исходный (проблемный) код:

html {
    height:100%;
}

body {
    height:100%;                    
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

мое решение состояло в том, чтобы установить высоту тела такой же, как высота контейнера.
формат html { высота:100%; }

body {
    height:96%;     /* 100% * (pageContainer*2) */
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

Я не проверял его в любом браузере, но это кажется, работает.

2

вот код, который все просили -- его в самом начале разработки, так что в нем еще не так много, что может быть полезно...

<!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
        <title></title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="mainContainer">
  <div class="header">  </div>
  <div class="mainContent">  </div>
 <div class="footer">  </div> 
</div>
</body>
</html>

вот css:

@charset "utf-8";
/* CSS Document */

body{
    margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
    padding: 0;
    color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;}

html{padding: 0; margin: 0;}

/* ---Section Dividers -----------------------------------------------*/
div.mainContainer{
    height: auto; width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; padding: 0;}

div.header{padding: 0; margin-bottom: 1em;}

div.leftSidebar{
    float: left;
    width: 22%; height: 40em;
    margin: 0;}

div.mainContent{margin-left: 25%;}

div.footer{
    clear: both;
    padding-bottom: 0em; margin: 0;}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
1

попробуйте margin - 10px:

body { margin-top:-10px; }
1

та же проблема была сводит меня с ума в течение нескольких часов. То, что я нашел, и вы можете проверить, это кодировка html. В моем html-файле я объявил кодировку utf-8 и использовал Notepad++ для ввода html-кода в формате utf-8. То, что я забыл, было UTF-8 BOM и никакой разницы в BOM. Кажется, когда объявленный html-файл utf-8 записывается как UTF-8 BOM, в начале файла есть какой-то невидимый дополнительный символ. Характер (непечатаемый я думаю) эффекты в одной строке "текст" в верхней части отрисованная страница. И вы не можете увидеть разницу в исходном представлении браузера (Chrome в моем случае). Как хорошие, так и испорченные файлы кажутся идентичными самому персонажу, но один из них хорошо визуализируется, а другой показывает этот гребаный верхний край.

чтобы обернуть его решение заключается в преобразовании файла в UTF-8 NO BOM и можно сделать это в т. е. Notepad++.

1
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

вставьте это в свой тег тела!

это приведет к удалению верхнего поля

0

у меня была точно такая же проблема. Для меня это было единственное, что сработало:

div.mainContainer { padding-top: 1px; }

он на самом деле работает с любым числом, которое не равно нулю. Я действительно понятия не имею, почему это позаботилось об этом. Я не так хорошо разбираюсь в CSS и HTML, и это кажется нелогичным. Установка body, html, h1 поля и отступы до 0 не имели никакого эффекта для меня. У меня тоже был h1 в верхней части моей страницы

0

body{
margin:0;
padding:0;
}
<span>Example</span>
0

Я пробовал почти каждый онлайн-метод, но у меня все еще есть верхнее пространство на моем веб-сайте, когда я открываю его с помощью браузера мобильного телефона opera mini, поэтому я решил попробовать исправить его самостоятельно, и я получил это право!

Я понимаю, когда даже вы отображаете страницу в одном макете, она соответствует веб-сайту на экране, а некоторые функции css отключены, так как функции margin, padding, float и position отключаются автоматически, когда вы подходите к экрану, а тело всегда добавляет встроенный обивка сверху. поэтому я решил поискать хотя бы одну функцию, которая работает, угадайте что? "дисплей." позвольте мне показать вам, как!

<html>
<head>
<style>
body {
display: inline;
}

#top {
display: inline-block;
}
</style>
</head>
<body>
<div id="top">

<!-- your code goes here! -->

eg: <div id="header"></div>
<div id="container"></div> and so on..

<!-- your code goes here! -->

</div>
</body>
</html>

Если вы заметили, тело{display:inline;} удаляет встроенное заполнение в теле, но без #top{display:inline-block;}, div все равно не будет отображаться хорошо, поэтому вы должны включить <div id="top"> элемент перед любым кодом на Вашей странице! столь простой.. надеюсь, это поможет? вы можете поблагодарить меня, если это работает,http://www.facebook.com/exploxi

0

вы также можете проверить, если:

{float: left;}

и

{clear: both;}

используются правильно в вашем css.

0

для opera просто добавьте это в заголовок

<link rel='stylesheet' media='handheld' href='body.css' />

это делает opera использовать большинство ваших пользовательских css.

0