Une marge supplémentaire de 5px est ajoutée au bas de chaque div.

Question

J'essaie de concevoir un simple en-tête pour une page en css. J'ai prévu d'empiler deux divs l'un sur l'autre. Celle du haut comporte de nombreux onglets et celle du bas est une simple image solide. Mais lors du rendu, je constate qu'un supplément de 5px est ajouté à la hauteur de ces deux divs. Je ne suis donc pas en mesure de placer la division inférieure exactement au-dessus de l'autre.

Il y a automatiquement une marge inférieure de 5px. J'ai essayé les marges négatives, remis les marges globales et les paddings à zéro. Cela ne sert toujours à rien.

Voici le code.

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

}

corps {

    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;

}

Voici le lien vers la page

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

J'ai passé trop de temps là-dessus. S'il te plaît, aide-moi.

Answer 1

La réponse d'Ege m'a été très utile. J'ai passé des heures à chercher la raison du remplissage du bas de certaines images dans des div. C'était la hauteur de ligne. Je l'ai mis à 0px sur les zones intéressantes :

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

Answer 2

Je pense que votre problème est le line-height . Oui, c'est ça. Je viens d'ajouter line-height:0 sur Firebug et ils ont collé ensemble.

Le problème avec les blocs inline est qu'ils se comportent comme n'importe quel texte inline. Vous avez également un problème similaire sur la navigation ci-dessous, parce que vous avez appuyé sur la touche "enter" dans votre code, il le rendra comme un espace insécable et ajoutera des marges x supplémentaires sur les côtés droit et gauche. Le X dépend ici de la taille de la police.

Pour résoudre ce problème, vous pouvez fermer et ouvrir les balises sur la même ligne comme ci-dessous :

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

ou vous pouvez définir le font-size y line-height a 0 mais ce n'est pas toujours possible si vous n'avez pas d'autres sélecteurs dans cette division.

Answer 3

Vous devez spécifier les unités dans vos déclarations CSS.

http://jsfiddle.net/m7YCW/

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

Apprenez à utiliser vos outils de développement dans Chrome. Si vous aviez fait un clic droit sur les éléments et choisi -> inspecter, les outils de développement apparaîtraient. Vous pouvez alors afficher les zones "metrics" et "computed styles" pour voir que main_nav avait un rendu de 30px au lieu de 25px et qu'il y avait un symbole d'avertissement à côté de la déclaration css 25 et qu'elle était explicitement abandonnée.

Answer 4

Essayez de régler vertical-align:bottom sur les images.