Cómo eliminar el espacio de margen alrededor del cuerpo o borrar los estilos predeterminados de css

Soy un principiante, pero también hice una buena cantidad de búsquedas antes de publicar esto. Parece que hay espacio extra alrededor de mi elemento div. También me gustaría señalar que probé muchas combinaciones de borde: 0, relleno: 0, etc. y nada parecía deshacerse del espacio en blanco.Cómo eliminar el espacio de margen alrededor del cuerpo o borrar los estilos predeterminados de css

Aquí está el código:

<html> 
<head> 
    <style type="text/css"> 
     #header_div { 
      background: #0A62AA; 
      height: 64px; 
      min-width: 500px; 
     } 
     #vipcentral_logo { float:left; margin: 0 0 0 0; } 
     #intel_logo  { float:right; margin: 0 0 0 0; } 
    </style> 
</head> 
<body> 
    <div id="header_div"> 
     <img src="header_logo.png" id="vipcentral_logo"> 
     <img src="intel_logo.png" id="intel_logo"/> 
    </div> 
</body>

Esto es lo que parece (Inserté flechas rojas para llamar explícitamente a cabo el espacio extra):

Extra space around a div element

I esperaba que el color azul topara directamente con los bordes del navegador y la barra de herramientas. Las imágenes tienen exactamente 64 píxeles de alto y tienen el mismo color de fondo que el asignado a #header_div. Cualquier información sería muy apreciada.

Fuente

2012-03-03 Anthony

Inspeccione su elemento con el complemento de desarrollador web Google Chrome o Firefox para ver qué estilos se le aplican. Es probable que sea un margen o relleno de la cabeza o el elemento html de su página. –

Un consejo simple para saber de dónde viene un espacio es establecer el color de fondo en algo diferente para cada elemento. Además de usar herramientas para inspeccionar los elementos ... – kaj

body tiene márgenes predeterminados: http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */

o puede utilizar restableció este útil Global

* { margin:0; padding:0; box-sizing:border-box; }

Si desea algo menos * mundial de:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
}

alguna otra CSS Restablecer:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
y hellip;

Fuente

2012-03-03 15:36:20

¡Gracias a todos por toda su ayuda! Intenté este primero como la solución de "homerun" y funcionó bien. ¡Problema resuelto! – Anthony

tratan de anuncio lo siguiente en su CSS:

body, html{ 
    padding:0; 
    margin:0; 
}

Fuente

2012-03-03 15:34:54 Alex

Ese es el margen por defecto/el relleno del elemento body.

Algunos navegadores tienen un margen predeterminado, algunos un relleno predeterminado, y ambos se aplican como un relleno en el elemento del cuerpo.

Añadir esto a tu CSS:

body { margin: 0; padding: 0; }

Fuente

2012-03-03 15:35:41 Guffa

intente eliminar los rellenos/márgenes de la etiqueta del cuerpo.

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

Fuente

2012-03-03 15:36:43

Gracias por esto, sé que es un tiempo después. Esto funcionó mejor para mí que la respuesta aceptada – redeagle47

Encontré este problema seguido incluso al establecer el MARGEN DEL CUERPO a cero.

Sin embargo, resulta que hay una solución fácil. Todo lo que necesita hacer es darle a su etiqueta HEADER un borde de 1px, así como establecer el MARGEN DEL CUERPO a cero, como se muestra a continuación.

body { margin:0px; } 

header { border:1px black solid; }

Si tiene alguna etiquetas H1, H2, dentro de su encabezado que también tendrá que establecer el margen de estas etiquetas a cero, esto se librará de cualquier espacio adicional que puede aparecer.

No estoy seguro de por qué funciona, pero uso el navegador Chrome. Obviamente, también puede cambiar el color del borde para que coincida con el color de su encabezado.

Fuente

2015-11-02 12:47:12 wardheed

Ir con este

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

Fuente

2016-08-05 04:38:17

tuve el mismo problema y mi primera <p> elemento que estaba en la parte superior de la página y también tenía un margen predeterminado WebKit del navegador. Esto estaba presionando mi división completa, que tenía el mismo efecto del que hablabas, así que ten cuidado con los elementos basados en texto que están en la parte superior de la página.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    </head> 
    <body style="margin:0;"> 
     <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh"> 
<p>Text in Paragraph</p> 
     </div> 
    </div> 
    </body> 
</html>

Así que simplemente recuerde comprobar todos los elementos secundarios, no solo las etiquetas html y body.

Fuente

2017-12-19 02:57:19 Daniel

Cómo eliminar el espacio de margen alrededor del cuerpo o borrar los estilos predeterminados de css

Respuesta

Cuestiones relacionadas