Prendre position relative de l'élément affecte pas la mise en page/hauteur

J'ai une icône, comme ceci:

<div class="mydiv">
   <i style="position: relative; top: 3px;"></i>
</div>

Je veux déplacer l'icône vers le bas par 3 pixels, ce qui fonctionne. Mais la div a encore une grande hauteur, car l'icône est techniquement l'expansion de la hauteur de la ligne. Comment puis-je faire de l'icône de ne pas affecter la mise en page à tous, et ne pas faire la div de plus en hauteur?

OriginalL'auteur Christian Stewart | 2015-06-01

  1. 5

    Vous devez en faire la mère de la position relative et le réel de l'élément absolu.

    <div class="mydiv">
    <i style="position: absolute; top: 3px;"></i>
</div>

.mydiv {
    position: relative;
}
    Merci, cela fonctionne aussi. L'autre réponse est plus instructif bien que j'ai donc accepté 🙂

    OriginalL'auteur wjkawecki

  2. 1

    pourquoi ne pas résoudre le problème avec des marges négatives?

    <div class="mydiv">
   <i style="position: relative; top: 3px; margin-bottom:-3px;"></i>
</div>

    OriginalL'auteur Tom Leppens