5px margine extra da aggiungere al fondo di ciascun div

Question

Sto provando a progettare una semplice intestazione su una pagina in css. Ho pianificato di impilare due div uno sopra l'altro. Quella in alto ha molte schede e quella in basso è una semplice immagine singola div. Ma quando eseguo il rendering vedo che un extra 5px viene aggiunto alle altezze di entrambe queste div. Quindi non sono in grado di posizionare il fondo esattamente sopra l'altro.

C'è un margine inferiore di 5 pixel automaticamente. Ho provato i margini negativi, azzerando i margini e i paddings globali. Ancora inutile.

Ecco il codice.

<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; 

} 

corpo {

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; 

} 

Ecco il link alla pagina

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

Ive passato troppo tempo su questo. Per favore aiuto.

Answer 1

È necessario specificare le unità nelle dichiarazioni CSS.

http://jsfiddle.net/m7YCW/

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

imparare a fare uso dei vostri strumenti di sviluppo in Chrome, se tu avessi destro del mouse abbottonato sugli elementi e scelto -> controllare che avrebbe portato i strumenti di sviluppo. È quindi possibile visualizzare le aree 'metriche' e 'stili calcolati' per vedere che main_nav stava eseguendo il rendering come 30px invece di 25px e anche che c'era un simbolo di avviso accanto alla dichiarazione 25 css e che veniva esplicitamente eliminato.

Answer 2

Provare a impostare vertical-align:bottom sulle immagini.

Answer 3

Penso che il tuo problema sia line-height. Sì, eccolo. Ho appena aggiunto line-height:0, sul firebug e sono rimasti incollati.

Il problema dei blocchi in linea è che si comportano proprio come qualsiasi testo in linea, inoltre hai un problema simile nella navigazione in basso, perché hai premuto il codice, lo renderà come spazio non interrotto e aggiungi margini x aggiuntivi anche ai lati destro e sinistro. X qui dipenderà dalla dimensione del carattere.

Per risolvere questo problema, è possibile tag o di chiusura e apertura sulla stessa linea come di seguito:

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

oppure è possibile impostare la font-size e line-height-0, ma quello non è sempre possibile se si don avere altri selettori all'interno di quel div

Answer 4

La risposta di Ege è stata molto utile per me. Ho passato ore a trovare il motivo di un riempimento inferiore di alcune immagini in div. Era l'altezza della linea.Impostalo su 0px nelle aree interessanti:

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