CSS: ¿Cómo puedo deshacerme de la ventana predeterminada "relleno"? Un elemento fijado a 100% de ancho no llega a las fronteras de la ventana

Así que tengo un elemento que se coloca directamente dentro del cuerpo:CSS: ¿Cómo puedo deshacerme de la ventana predeterminada "relleno"? Un elemento fijado a 100% de ancho no llega a las fronteras de la ventana

<body> 
    <div id="header">Some stuff...</div> 
    Other stuff... 
</body>

El siguiente es el CSS utilizado:

body{ 
    text-align:center; 
} 
#header{ 
    margin:auto; 
}

Así el #header div se establece en 100% de ancho (predeterminado) y está centrado. El problema es que hay un "espacio" entre el borde de la ventana y el elemento #header ... Como:

| |----header----| | 
^window border  ^window border

He intentado ajustar con Javascript, y redimensiona con éxito el elemento al ancho de la ventana exacta, pero no elimina el "espacio":

$('#header').width($(window).width());

Una solución parece ser que añadir las siguientes reglas CSS (y mantener el javascript arriba):

#header{ 
    margin:auto; 
    position:relative; 
    top:-8px; 
    left:-8px; 
}

En mi navegador este "espacio" es 8px - pero no estoy seguro de si eso es lo mismo en todos los navegadores? Estoy usando Firefox en Ubuntu ...

Entonces, ¿cuál es la forma correcta de deshacerse de este espacio? Y si es lo que utilicé anteriormente, ¿todos los navegadores funcionan igual?

Fuente

2010-12-31 Alex

body tiene márgenes por defecto en todos los navegadores, así que todo lo que necesita hacer es afeitarse apagado:

body { 
    margin: 0; 
    text-align: center; 
}

A continuación, puede eliminar los márgenes negativos de #header.

Fuente

2010-12-31 12:55:25 BoltClock

Ay, traté de quitar el relleno del cuerpo, pero no pensé en el margen ... Pensé que el cuerpo era algo así como la ventana, y que sus "límites" estaban ubicados en el mismo lugar. .. No sé si eso es comprensible. ^^ ¡Gracias de todos modos! – Alex

@Alex: el elemento que está más relacionado con * la ventana del navegador * (por así decirlo) es 'html', no' body'. Vea [esta respuesta] (http: // stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body-element/4565959 # 4565959) para más información. – BoltClock

añadir estos a la etiqueta style en body, como la siguiente:

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

Se trabajó para mí. ¡¡Buena suerte!!

Fuente

2012-12-21 07:15:35 Tharindulucky

Una manera fácil de resolver este problema es deshacerse de todos los márgenes. Y usted puede hacerlo mediante el siguiente código:

* { 
    margin:0; 
}

Esto va a resolver el problema y le dará un mayor control sobre los márgenes de todos los elementos.

Fuente

2013-08-28 02:59:07 Bups

Debe tenerse en cuenta que esta es una solución de exceso y puede ser lenta en algunos casos. –

Encontré este problema aun cuando establezca 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; }

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:13:13 wardheed

CSS: ¿Cómo puedo deshacerme de la ventana predeterminada "relleno"? Un elemento fijado a 100% de ancho no llega a las fronteras de la ventana

Respuesta

Cuestiones relacionadas