html - quitar - Cómo eliminar el espacio del margen alrededor del cuerpo o borrar los estilos CSS predeterminados
quitar margen superior css (7)
Encontré que este problema continuaba incluso al configurar el MARGEN CORPORAL en 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, además de establecer el MARGEN CORPORAL en cero, como se muestra a continuación.
body { margin:0px; }
header { border:1px black solid; }
Si tiene alguna etiqueta H1, H2 dentro de su HEADER, también necesitará configurar el MARGEN para estas etiquetas a cero, esto eliminará cualquier espacio adicional que pueda aparecer.
No estoy seguro de por qué esto funciona, pero uso el navegador Chrome. Obviamente, también puede cambiar el color del borde para que coincida con el color de su encabezado.
Soy cierto que 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.
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 el espacio extra):
Esperaba que el color azul se apoyara directamente en los bordes y la barra de herramientas del navegador. Las imágenes tienen una altura exacta de 64 píxeles y tienen el mismo color de fondo que el asignado a #header_div. Cualquier información sería muy apreciada.
Ese es el margen / relleno predeterminado del elemento de body .
Algunos navegadores tienen un margen predeterminado, otros un relleno predeterminado, y ambos se aplican como un relleno en el elemento del cuerpo.
Agrega esto a tu CSS:
body { margin: 0; padding: 0; }
Ir con esto
body {
padding:0px;
margin:0px;
}
Tuve el mismo problema y mi primer elemento <p> que estaba en la parte superior de la página y también tenía un margen predeterminado del navegador web. Esto presionaba a mi div entero hacia abajo, que tenía el mismo efecto del que hablabas, así que ten cuidado con los elementos basados en texto que se encuentran 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 recuerde verificar todos los elementos secundarios, no solo las etiquetas html y body.
intente agregar lo siguiente en su CSS:
body, html{
padding:0;
margin:0;
}
intente quitar el relleno / márgenes de la etiqueta del cuerpo.
body{
padding:0px;
margin:0px;
}
body tiene márgenes predeterminados: http://www.w3.org/TR/CSS2/sample.html
body { margin:0; } /* Remove body margins */
O podrías usar este útil reinicio global
* { margin:0; padding:0; box-sizing:border-box; }
Si quieres algo menos * global que:
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;
}
algún otro restablecimiento de CSS :
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/
...