Ответ 1
У меня была аналогичная проблема, она была решена с помощью следующего CSS:
body {
margin: 0 !important;
padding: 0 !important;
}
Как удалить верхнее поле на веб-странице?
У меня была эта проблема с каждой созданной мной веб-страницей. Всегда есть верхний край над основным контейнером, который я использую для размещения моего контента в центре страницы. Я использую таблицу стилей 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 */
Ответы
Ответ 2
Является ли ваш первый элемент h1 или похожим? Этот элемент margin-top может вызывать то, что кажется краем на body.
Ответ 3
Лучший способ для полей reset для всех элементов - использовать правило css asterisk.
Добавьте это в начало своего css под @charset:
* {
margin: 0px;
padding: 0px;
}
Это приведет к удалению всех предустановленных полей и дополнений со всеми элементами body, h1, h2, p и т.д. Теперь вы можете сделать верхний или заголовок страницы заподлицо с браузером вместе с любыми изображениями или текстом в других div.
Ответ 4
Множество элементов в 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;
}
Надеюсь, это поможет всем разработчикам, это то, что прослушивалось для меня некоторое время, когда я учился.
Ответ 5
Вы можете предотвратить эффекты разворот маржи с помощью:
body { overflow: hidden }
Это приведет к тому, что поля body останутся точными.
Ответ 6
У меня была такая же проблема. Он был разрешен следующей строкой css;
h1{margin-top:0px}
Мой основной div содержал тег h1 в начале.
Ответ 7
У меня была аналогичная проблема. Мне нужен процентный рост и верхняя граница для моего контейнера 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%;
}
Я не тестировал его в каждом браузере, но это работает.
Ответ 8
Вот код, который все просили - его в самом начале разработки, так что в нем пока мало чего, что может быть полезно...
<!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 */
Ответ 9
Попробуйте поле -10px:
body { margin-top:-10px; }
Ответ 10
Эта же проблема заставляла меня сходить с ума несколько часов. То, что я нашел, и вы можете проверить, это html-кодирование. В моем html файле я объявлял utf-8-кодировку и использовал Notepad ++ для ввода html-кода в формате utf-8. О том, что я забыл, была спецификация UTF-8 и отсутствие спецификации. Кажется, когда utf-8 объявил, что html файл написан как спецификация UTF-8, в начале файла есть некоторый невидимый дополнительный символ. Символ (непечатаемый, я думаю) влияет на одну строку "текста" в верхней части страницы. И вы не можете видеть разницу в исходном виде браузера (в моем случае Chrome). Оба хороших и испорченных файла кажутся похожими на самого персонажа, но один из них красиво выглядит, а другой показывает этот лишний верхний край.
Чтобы обернуть это решение, нужно преобразовать файл в UTF-8 NO BOM, и это можно сделать в i.e. Notepad ++.
Ответ 11
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"
вставьте это в свой тег тела!
это приведет к удалению верхнего поля
Ответ 12
У меня была такая же проблема. Для меня это единственное, что сработало:
div.mainContainer { padding-top: 1px; }
Он фактически работает с любым числом, которое не равно нулю. Я действительно не знаю, почему это позаботилось об этом. Я не настолько осведомлен о CSS и HTML, и это кажется противоречивым. Установка полей body, html, h1 и paddings на 0 не повлияла на меня. У меня также был h1 в верхней части моей страницы
Ответ 13
body{
margin:0;
padding:0;
}<span>Example</span>Ответ 14
Я пробовал почти каждую онлайн-технику, но у меня все еще было место на моем веб-сайте, когда я открывал его с помощью браузера мобильного телефона Opera, поэтому решил исправить его самостоятельно, и я понял!
я понимаю, что даже когда вы показываете страницу в одном макете, она подходит к веб-сайту на экране, а некоторые функции 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
Ответ 15
вы также можете проверить:
{float: left;}
и
{clear: both;}
используются правильно в вашем CSS.