5px margen adicional que se agrega a la parte inferior de cada div

Question

Estoy intentando diseñar un encabezado simple para una página en css. Planeé apilar dos divs uno encima del otro. El de arriba tiene muchas pestañas y el de abajo es un div simple de imagen única. Pero al renderizar, veo que se está sumando un 5px adicional a las alturas de estos dos divs. Así que no puedo colocar el fondo exactamente encima del otro.

Hay un margen inferior de 5 píxeles automáticamente. Probé los márgenes negativos, restablecí los márgenes globales y los rellenos a cero. Todavía no uso

Aquí está el código.

<div class ="main_nav"> 
<div class="first_tab"> 
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> 
</div> 
<div class = "ind_tab"> 
<img src ="images/startup/tab1_orange.png" height="25" width="90" alt="Temp"/> 
</div> 
<div class = "ind_tab"> 
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> 
</div> 
</div> 
<div class="lock"> 
<img src ="images/startup/divbg_new.png" alt="Temp" /> 
</div> 

CSS:

*{ margin:0; padding:0; } 
ul.master_navigation 
{ 
    font-size: 125%; 
    font-weight: bold; 
    text-align: center; 
    list-style: none; 
    margin: 0.5em 0; 
    padding: 0; 
} 

ul.master_navigation li 
{ 
    display: inline-block; 
    padding: 0 1%; 
} 

a 
{ 
    color: #08f; 
    font-weight: bold; 
    text-decoration: none; 
} 

a:visited 
{ 
    color: #88f; 
} 

a:hover 
{ 
    color: #f00; 
} 

p 
{ 

    text-align: justify; 
} 


p.cent 
{ 
    text-align: left; 
} 

div.header 
{  
    height: 200; 
} 

div.main_nav 
{ 
    display: inline-block; 
    height: 25; 

    width: 900; 
    padding: 0; 
    margin: 0; 
    vertical-align: bottom; 

} 

div.first_tab 
{  
    height: 25; 
    float: left; 


} 
div.ind_tab 
{  

    height: 25; 
    float: left; 
    margin-left: -10px; 
    z-index: -5; 

} 

div.lock 
{ 
    margin-top: -100; 
    height: 91; 
    width: 900; 
    padding: 0; 
    margin: -5; 

} 

cuerpo {

width:900px; 
    max-width: 100%; 
    margin: auto; 
    padding: 0; 
    background-image:url(images/startup/bg_2.gif); 
    background-repeat:repeat-x; 
} 

.pad 
{ 
    padding: 0; 
    margin: 0; 

} 

Aquí está el enlace a la página

http://net4.ccs.neu.edu/home/pradep/

he pasado demasiado tiempo en esto. Por favor ayuda.

Answer 1

Necesita especificar unidades en sus declaraciones de CSS.

http://jsfiddle.net/m7YCW/

div.main_nav 
{ 
    display: inline-block; 
    height: 25px;  /* set px */ 
    width: 900; 
    padding: 0; 
    margin: 0; 
    vertical-align: bottom;  
} 

aprender a hacer uso de sus herramientas de desarrollo de Chrome, si tuviera derecho del ratón sobre los elementos abotonada y elegido -> inspeccionar sería abrir las herramientas dev. A continuación, puede ver las áreas 'métricas' y 'estilos computados' para ver que main_nav estaba representando 30px en lugar de 25px y también que había un símbolo de advertencia junto a la declaración de 25 css y que se eliminaba explícitamente.

Answer 2

Pruebe la configuración vertical-align:bottom en las imágenes.

Answer 3

Creo que su problema es el line-height. Sí, ahí está. Acabo de agregar line-height:0, en Firebug y se mantuvieron unidos.

Lo que sucede con los bloques en línea es que se comportan como cualquier texto en línea, también tiene un problema similar en la navegación a continuación, porque presionó ingresar su código, lo representará como un espacio sin interrupciones y agrega márgenes X adicionales a los lados derecho e izquierdo también. X aquí dependerá del tamaño de la fuente.

Para solucionar esto, se puede etiquetas ya sea de cierre y apertura en la misma línea como la siguiente:

<div> 
. 
. 
. 
</div><div> 
. 
. 
. 
</div> 

o puede establecer la font-size y line-height a 0, pero no siempre eso es posible si usted don No tiene otros selectores dentro de ese div.

Answer 4

La respuesta de Ege fue muy útil para mí. He pasado horas buscando la razón de un relleno de algunas imágenes en div's. Era la altura de la línea.Configúrelo en 0px en las áreas interesantes:

.divclass { 
    line-height: 0px; /* crucial for bottom padding 0 !!! */ 
}