Как удалить верхнее поле на веб-странице? - PullRequest
Новая
       5

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

53 голосов
/ 22 марта 2010

У меня была эта проблема с каждой созданной мной веб-страницей. Всегда есть верхнее поле над разделом «основной контейнер», который я использую для размещения своего контента в центре страницы. Я использую таблицу стилей 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;
}

Я смотрел онлайн много раз, но все, что я могу видеть, это установить эти атрибуты margin и padding. Есть ли что-то еще, что я должен делать? Маржа существует в 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 ]

87 голосов
/ 22 марта 2010

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

53 голосов
/ 07 декабря 2012

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

body {    
    margin: 0 !important;
    padding: 0 !important;
}
26 голосов
/ 10 июля 2012

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

Добавьте это в начало вашей CSS под @charset: 

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

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

10 голосов
/ 05 июня 2012

Многие элементы в CSS имеют отступы и поля по умолчанию. Поэтому, когда вы начинаете создавать новый сайт, всегда хорошо иметь готовый файл reset.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;
}

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

9 голосов
/ 17 сентября 2012

Вы можете предотвратить эффекты разрушения полей с помощью: 

body { overflow: hidden }

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

4 голосов
/ 22 сентября 2011

У меня была такая же проблема. Это было решено следующей строкой CSS; 

h1{margin-top:0px}

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

2 голосов
/ 05 июля 2011

У меня была похожая проблема. Я хотел процентную высоту и верхнюю границу для моего контейнера 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%;
}

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

1 голос
/ 22 апреля 2018

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

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

Это позволяет опере использовать большинство ваших настроенных CSS.

1 голос
/ 06 октября 2015

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

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

1 голос
/ 03 мая 2014

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

body { margin-top:-10px; }
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...