Cómo eliminar el espacio de margen alrededor del cuerpo o borrar los estilos CSS predeterminados
Es cierto que soy un principiante, pero también busqué bastante antes de publicar esto. Parece haber espacio adicional alrededor de mi elemento div. También me gustaría señalar que probé muchas combinaciones de borde: 0, relleno: 0, etc. y nada pareció eliminar el 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 señalar explícitamente el espacio adicional):
Esperaba que el color azul lindara directamente con los bordes del navegador y la barra de herramientas. Ambas 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.
bodytiene por defecto 8px márgenes: http://www.w3.org/TR/CSS2/sample.html
body {
margin: 0; /* Remove body margins */
}
O podrías usar este útil reinicio global
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Si quieres algo menos * global :
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://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…
Intente eliminar el relleno/márgenes de la etiqueta del cuerpo.
body{
padding:0px;
margin:0px;
}
Ese es el margen/relleno predeterminado del bodyelemento.
Algunos navegadores tienen un margen predeterminado, otros un relleno predeterminado y ambos se aplican como relleno en el elemento del cuerpo.
Añade esto a tu CSS:
body { margin: 0; padding: 0; }
Descubrí que este problema continúa incluso cuando establezco el MARGEN DEL CUERPO 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 1 px, además de establecer el MARGEN DEL CUERPO en cero, como se muestra a continuación.
body { margin:0px; }
header { border:1px black solid; }
Si tiene etiquetas H1, H2 dentro de su ENCABEZADO, también deberá establecer el MARGEN para estas etiquetas en cero, esto eliminará cualquier espacio adicional que pueda aparecer.
No estoy seguro de por qué funciona esto, pero uso el navegador Chrome. Obviamente también puedes cambiar el color del borde para que coincida con el color de tu encabezado.
