Eliminando espacio en la parte superior izquierda y derecha de div

Estoy empezando a trabajar con CSS y tengo un problema básico.Eliminando espacio en la parte superior izquierda y derecha de div

que tienen un elemento div:

.top { 
 
    background-color: #3B5998; 
 
    margin-left: 0px; 
 
    margin-top: 0px 
 
}

<div class="top">...</div>

El código de color está llevando a efecto (bueno).

El problema que tengo es que parece que hay un poco de espacio en blanco a la izquierda, arriba y derecha del div. ¿Cómo me deshago del espacio en blanco? Por ejemplo, si echa un vistazo a la página de Facebook, la parte superior es completamente azul, no hay espacios en blanco en la parte superior.

Fuente

2011-07-08 Bruce

Aunque puede haber una respuesta concreta a esta pregunta, usted debe buscar en el uso de un [reset hoja de estilo] (http://meyerweb.com/eric/tools/css/reset/). –

tendrá que restablecer tanto el valor por defecto de relleno y margen atribuye en su hoja de estilos:

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

Como se menciona @ Jason McCreary, también se debe buscar en el uso de una hoja de estilo de reinicio. Aquel con el que se vincula, el restablecimiento CSS de Eric Meyer, es un excelente lugar para comenzar.

También parece que te falta un punto y coma en su css, debe verse de la siguiente manera:

.top 
{ 
    background-color:#3B5998; 
    margin-left:0px; 
    margin-top:0px; 
}

Fuente

2011-07-08 03:17:18

¡Eso fue todo! Muchas gracias. – Bruce

Oh Dios ... Me había vuelto loco con esto ... Terminé 3 tutoriales en CSS y ninguno mencionó que el cuerpo en sí tiene un margen/relleno :) ¡Muchas gracias! – hakermania

Tuve el mismo problema al comenzar; pero si planea hacer sitios web que sean compatibles con varios navegadores, le recomiendo usar una hoja de estilo de restablecimiento de CSS; esencialmente restablecen los estilos que el navegador agrega a los elementos (que pueden ser diferentes para diferentes navegadores). Solo mis 2 centavos en este tipo de cosas. un google rápido para el restablecimiento de css le dará una cantidad de opciones. –

Hay padding en el <body> de la página. Puede solucionar este modo:

body 
{ 
    padding: 0; 
}

Fuente

2011-07-08 03:03:34 Marty

Gracias. Hice el cambio, el mismo problema. – Bruce

Prueba * {margen: 0; relleno: 0; } – Marty

Si necesita algo de relleno en el interior del div, usted debe elegir el relleno:

padding:top right bottom left;

ejemplo:

padding:5px; /* 5px padding at all sides)*/ 
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */ 
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */ 
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */

mismo modo para controlar el espacio fuera del div, se puede utilizar el margen.

El margen usará la misma fórmula exacta.

Fuente

2011-07-08 03:26:02 kheya

Hmm..Nunca usé eso. Pero es bueno saberlo thx – kheya

He utilizado este y funcionó para mí:

body { 
    background-position: 50% 50%; 
    margin:0px; 
    padding:0px !important; 
    height:100%; 
}

Fuente

2013-04-24 20:48:04 Marcos

Después de mucho tiempo he encontrado la solución correcta para mí:

html, body { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
}

Necesitamos definir el desbordamiento en la horizontal.

Fuente

2015-09-15 19:04:12 monteirobrena

Eso es malo. ¡Nunca puedes desplazarte horizontalmente! –

el problema que tuve últimamente también, pero a pesar de que usé relleno: 0px incluso agregó el! Importante en el cuerpo no lo resolvió ... el problema real era su posición ... que puede hacer mediante el uso de fondo - posición: 50% 50%; o dejar que elija automáticamente la posición central de la pantalla ... que es margin: 0 auto; o margen: auto; eso lo resolvió para mí ... espero para todos ustedes también. Me di cuenta de que el margen es lo que necesitaba después de intentar la respuesta de @ HAS. Gracias, hombre. Genial. Lo siento por zombificar la publicación

Fuente

2016-02-07 08:57:59

Si otras respuestas no funcionan, pruebe position:absolute; top: 0px; left: 0px; o display:flex.

Fuente

2016-04-24 06:48:07 Noumenon

margin: 0px; eliminaría todos los espacios alrededor del elemento.

relleno: 0px; despeja el área alrededor del contenido

algunas medidas son:

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

con margen: auto; el navegador calcula un margen.

También puede utilizar

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

esto eliminará todos los márgenes predeterminados y espacios. Pero tenga cuidado al usar:

position: absolute;

La propiedad 'posición' puede tomar 4 valores, estático, relativo, fijo y absoluto. Luego puede usar las propiedades superior, inferior, izquierda, derecha para ubicar su elemento. Esto depende de tu diseño. Este enlace podría ser útil https://www.w3schools.com/css/css_margin.asp

Fuente

2017-08-01 12:44:26 Ananda

Incluya una breve descripción de cómo o por qué funciona esto. – jpaugh

por favor elimine el voto negativo si esto fue útil – Ananda

No tengo superpoderes (y no voté negativamente), pero creo que la pregunta es mucho mejor ahora. – jpaugh

Tuve el mismo problema. Intenta esto:

html, body { 
    margin-top:-13px; 
}

Fuente

2017-09-12 16:06:42 mhk

Eliminando espacio en la parte superior izquierda y derecha de div

Respuesta

Cuestiones relacionadas