5px de marge supplémentaire ajoutée au bas de chaque div
Je suis en train de concevoir un simple en-tête d'une page en css. J'ai prévu d'empiler deux divs sur le dessus les uns des autres. Le sommet a de nombreux onglets et celui du bas est une plaine unie et de l'image de la div. Mais lors du rendu, je vois qu'un supplément 5px est s'ajouter à la hauteurs de ces deux divs. Je ne suis donc pas en mesure de placer le bas sur exactement sur le dessus de l'autre.
Il y a un 5px la marge du bas automatiquement. J'ai essayé des marges négatives, réinitialiser le mondial les marges externes et internes à zéro. Toujours pas de l'utiliser.
Heres 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/
Ive été de passer trop de temps sur ce sujet. S'il vous plaît aider.
source d'informationauteur Pradep
Vous devez vous connecter pour publier un commentaire.
Vous devez spécifier les unités sur vos déclarations CSS.
http://jsfiddle.net/m7YCW/
Apprendre à rendre l'utilisation de vos outils de développement de Chrome, si vous aviez droit de la souris boutonnée sur les éléments et choisis -> inspecter, il mettrait en place les outils de dev. Vous pouvez alors afficher les "métriques" et " calculée styles les domaines de voir que main_nav a été rendu comme 30px au lieu de 25px et qu'il était un symbole de mise en garde à l'25 css déclaration et il était explicitement supprimé.
Ege de réponse a été très utile pour moi. J'ai passé des heures à trouver la raison d'un remplissage en bas de certaines images en div. Il a été à la hauteur de la ligne. Mis à 0px sur les zones intéressantes:
Je pense que votre problème est la
line-height
. Yup, ça y est. Juste ajoutéline-height:0
sur firebug et ils sont restés ensemble.La chose à propos de inline-blocks, c'est qu'ils se comportent comme n'importe quel texte en ligne, vous avez également un problème similaire sur la navigation ci-dessous, parce que vous avez appuyé sur la touche entrée de votre code, il va le rendre comme un espace de non-rupture et ajouter de la x les marges à droite et à gauche. X ici dépendra de la taille de la police.
Afin de résoudre ce problème, vous pouvez soit fermer et ouvrir les balises sur la même ligne comme ci-dessous:
ou vous pouvez définir la
font-size
etline-height
à0
mais ce n'est pas toujours possible si vous n'avez pas d'autres sélecteurs intérieur de ce div.Essayez de définir
vertical-align:bottom
sur les images.