Как удалить верхнее поле на веб-странице? - PullRequest
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 ]

1 голос
/ 22 марта 2010

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

<!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 */
0 голосов
/ 06 ноября 2016

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

{float: left;}

и

{clear: both;}

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

0 голосов
/ 04 октября 2016

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

Я понимаю, что даже когда вы отображаете страницу в одном макете, веб-сайт умещается на экране, а некоторые функции CSS отключены, поскольку функции полей, отступов, плавающего и позиционного местоположения отключаются автоматически при установкеЭкран, а тело всегда добавить встроенный отступ в верхней части.поэтому я решил поискать хотя бы одну работающую функцию, знаете что?«Дисплей».позвольте мне показать вам, как!

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

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

0 голосов
/ 14 марта 2016

body{
margin:0;
padding:0;
}
<span>Example</span>
0 голосов
/ 10 октября 2014

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

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

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

0 голосов
/ 29 января 2014
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

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

это удалит верхнее поле

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