Ik weet niet of mijn vraag hier thuis hoort, maar wellicht kan iemand me op weg helpen.
Ik heb een stukje css code en ik kan er maar niet uit komen waarom er een bepaalde ruimte zit tussen twee elementen.
stukje html5
<header>
<nav>
<ul>
... etc ...
</ul>
</nav>
</header>
de bijbehorende css opmaak is:
header{
position: relative;
border-bottom: 1px solid orange;
margin: 0;
padding: 0;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
}
header nav{
display: inline-block;
// margin-bottom: -2px;
width: 100%;
padding: 0;
}
header nav ul{
list-style: none;
margin-left: -8px;
padding-left: 8px;
}
Nu zou ik denken dat het nav-block dezelfde hoogte zou hebben als het header-block. Maar helaas, daar blijkt een paar px verschil in te zitten.
Het header-block blijkt de (binnen) afmeting van 965x19 te hebben, de nav 965x16. En het verschil zit in de onderkant. Nu kan ik dat wel oplossen met een margin-bottom:-3px; maar dat vindt ik niet echt een mooie oplossing. Zekern niet omdat in niet weet waar het verschil door wordt veroorzaakt.
Heeft iemand enig idee waarom?
[size=xsmall]Toevoeging op 11/04/2016 15:15:53:[/size]
48 gluurders maar helaas nog geen enkele reactie ;)