html - poner - quitar margen superior css
¿Cómo elimino el margen superior en una página web? (16)
He tenido este problema con cada página web que he creado. Siempre hay un margen superior sobre el div ''contenedor principal'' que uso para colocar mi contenido en el centro de la página. Estoy usando una hoja de estilo css y he establecido márgenes y relleno en el cuerpo a 0px y establecí el margen y el relleno en 0 en el 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;
}
He buscado en línea muchas veces, pero todo lo que puedo hacer es establecer estos atributos de margen y relleno. ¿Hay algo más que debería estar haciendo? El margen existe en IE y Firefox.
Aquí hay una mirada más completa al código (está en las etapas iniciales de la creación, por lo que no hay mucho en él ...)
<!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>
Aquí está el 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 */
¿Es su primer elemento h1 o similar? El margin-top ese elemento podría estar causando lo que parece un margen en el body .
El mismo problema me ha vuelto loco durante varias horas. Lo que encontré y es posible que desee comprobar es la codificación html. En mi archivo html, declare la codificación utf-8 y utilicé Notepad ++ para ingresar el código html en formato utf-8. Lo que HICE olvidar fue UTF-8 BOM y ninguna diferencia en BOM. Parece que cuando utf-8 declara que el archivo html está escrito como UTF-8 BOM hay algún carácter extra invisible al comienzo del archivo. El carácter (no imprimible, supongo) afecta en una fila de "texto" en la parte superior de la página representada. Y no puede ver la diferencia en la vista de origen del navegador (Chrome en mi caso). Tanto los archivos agradables como los mimados parecen idénticos al personaje, todavía uno de ellos se muestra agradablemente y el otro muestra este maldito margen superior.
Para concluir, la solución es convertir el archivo a UTF-8 NO BOM y uno puede hacerlo en ie Notepad ++.
Este es el código que todo el mundo estaba pidiendo: está en el comienzo del desarrollo, por lo que aún no hay mucho en él, lo que puede ser útil ...
<!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>
Aquí está el 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 */
He estado teniendo un problema similar. Quería un alto porcentual y un margen superior para mi contenedor div, pero el cuerpo tomaría el margen del contenedor div. Creo que encontré una solución.
Aquí está mi código original (problema):
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%;
}
Mi solución fue establecer la altura del cuerpo igual que la altura del contenedor.
html {altura: 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%;
}
No lo he probado en todos los navegadores, pero parece que funciona.
La mejor manera de restablecer los márgenes para todos los elementos es usar la regla de asterisco css.
Agregue esto al principio de su css en el @charset:
* {
margin: 0px;
padding: 0px;
}
Esto eliminará todos los márgenes preestablecidos y el relleno con todos los elementos body, h1, h2, p, etc. Ahora puede hacer que la parte superior o el encabezado de su página estén alineados con el navegador junto con cualquier imagen o texto en otros divs.
Muchos elementos en CSS tienen relleno y márgenes predeterminados. Entonces, cuando comiences a construir un nuevo sitio, siempre es bueno tener un archivo reset.css listo. Agregue esto para hacer que se froten los valores predeterminados, para que tenga más control sobre su página web.
/* 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;
}
Espero que esto ayude a todos los desarrolladores compañeros. Esto es algo que me molestaba un rato cuando estaba aprendiendo.
Para la ópera solo agregue esto en el encabezado
<link rel=''stylesheet'' media=''handheld'' href=''body.css'' />
Esto hace que Opera use la mayoría de tus CSS personalizados.
Probé casi todas las técnicas en línea, pero todavía tengo el espacio más alto en mi sitio web, cuando lo abro con el navegador de la mini operadora de telefonía móvil, así que decidí intentar solucionarlo por mi cuenta, ¡y lo hice bien!
Me doy cuenta de que incluso cuando visualiza una página en un solo diseño, ajusta el sitio web a la pantalla, y algunas funciones CSS se desactivan, ya que las funciones de margen, relleno, flotación y posición se desactivan automáticamente cuando se ajusta a la pantalla, y el cuerpo siempre agregue relleno incorporado en la parte superior. entonces decise buscar al menos una función que funcione, ¿adivinen qué? "monitor". ¡Déjame enseñarte como!
<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>
Si observa, el cuerpo {display: inline;} elimina el relleno incorporado en el cuerpo, pero sin #top {display: inline-block;}, el div aún no se mostrará bien, por lo que debe incluir el <div id="top"> elemento antes de cualquier código en su página! tan simple ... espero que esto ayude? puedes agradecerme si funciona, http://www.facebook.com/exploxi
Pruebe el margen -10px :
body { margin-top:-10px; }
Tenía exactamente el mismo problema. Para mí, esto fue lo único que funcionó:
div.mainContainer { padding-top: 1px; }
Realmente funciona con cualquier número que no sea cero. Realmente no tengo idea de por qué esto se encargó de eso. No soy tan conocedor de CSS y HTML y parece contradictorio. Establecer el body, html, h1 márgenes body, html, h1 y los rellenos en 0 no tuvo ningún efecto para mí. También tuve un h1 en la parte superior de mi página
Tuve el mismo problema Fue resuelto siguiendo la línea css;
h1{margin-top:0px}
Mi div principal contenía la etiqueta h1 al principio.
Tuve un problema similar, esto se resolvió con el siguiente CSS:
body {
margin: 0 !important;
padding: 0 !important;
}
también puedes verificar si:
{float: left;}
y
{clear: both;}
se usan correctamente en tu css.
body{
margin:0;
padding:0;
}
<span>Example</span>
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"
pega esto en tu etiqueta corporal!
esto eliminará el margen superior