elementos de bloque de CSS que crean huecos entre elementos div

Question

Estoy teniendo dificultades con espacios entre bloques div:

<div id="maincontentwrapper" >
  <img src="images/content-top.png" alt="main content border image" border="1" />
  <div id="maincontent" >
    <div id="pagecontent">
       <h1>Mission Statement</h1>
    </div>
  </div>
  <img src="images/content-bottom.png" alt="main content border image" />
</div> 

Esta es la creación de una página con una imagen confinada completa. Todo está bien, sin embargo, tan pronto como entro en un elemento de bloque dentro de PageContent, por ejemplo la cabecera como se muestra, a continuación, aparece un hueco entre la imagen contenido-top.png y el div maincontent.

Si cambio el primer carácter a ser en línea, por ejemplo, un espacio de no separación o simplemente una carta, entonces la brecha no aparece.

Este es el css (relevante):

img {
 margin: 0;
 padding: 0;
}
#maincontentwrapper { 
}
#maincontent {
 background-image: url('../../images/content-main.png');
 background-repeat: repeat-y;
 min-height: 300px;
 width: 757px;
}
#pagecontent {
 width: 625px;
 margin-left: auto;
 margin-right: auto;
}

Gracias por cualquier ayuda

Answer 1

Es probablemente un margen aplicado por el navegador por defecto. Probar su código con

h1 { margin: 0; }

añadido a la CSS. ¿Le ayuda?

(El elemento h1 no es el único elemento en bloque a "sufrir" de esto, p tiene márgenes por defecto en la mayoría de los navegadores también.)

Si está bastante seguro de navegador de su cliente apoyará CSS3, que tiene un mecanismo de copia de seguridad, o que simplemente no les importa, que podría hacer

.maincontent :first-child, .maincontent :first-child :first-child {
    margin: 0;
}

que fijará el margen del primer hijo a 0, independientemente del tipo de elemento.

Otra cosa que podría hacer es aplicar una hoja de estilo de reinicio " " que deshace por defecto de los navegadores enmascarando con ceros. Sin embargo, no le aconsejaría a hacerlo, ya que por defecto de los navegadores realmente tienen sentido la mayor parte del tiempo, y restablecer todos ellos podría dar lugar a efectos perturbadores.

Answer 2

¿Usted ha intentado un elemento más que un H1? Creo que el problema viene del elemento H1 tener márgenes por defecto y tal vez eso es lo que "empujar" el div abajo y dejando un hueco. Por cierto, ¿está utilizando plug-in Firebug CSS a prueba de Firefox? Es muy potente y permite modificar en la marcha.

Answer 3

Yo diría que este es un problema debido a la configuración por defecto del navegador CSS, como las aplicadas a p h1, etc.

Una forma de deshacerse de esto es utilizar un poco de "reset" css como el de 960grid: aquí

A partir de mi experiencia, que trabaja muy bien:)

Answer 4

Tal vez porque los márgenes están colapsando. Trate de añadir

padding: 0 1px 0 1px;

a img o div o ambos.

Answer 5

La etiqueta <img /> se hace en línea por defecto. Trate display: block.