Définir la position absolue et la marge

Question

Je voudrais définir position absolute et avoir un margin-bottom, mais il semble que le margin-bottom n'a pas d'effet.

HTML :

<div id='container'></div>

CSS :

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}

Answer 1

Je sais que ce n'est pas une réponse très opportune, mais il existe un moyen de résoudre ce problème. Vous pouvez ajouter un élément "espaceur" à l'intérieur de l'élément positionné absolutely avec une marge inférieure négative et une hauteur qui est de la même taille que la marge inférieure négative.

HTML :

<div id="container">
    <div class="spacer"></div>
</div>

CSS :

// same container code, but you should remove the margin-bottom as it has no effect

// spacer code, made it a class as you may need to use it often
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}

Answer 2

S'appuyant sur la réponse de Joey, pour un balisage plus propre, utilisez le sélecteur CSS :after pour ajouter un espaceur pour la marge inférieure souhaitée.

CSS

#container:after {
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 1px;
}

Answer 3

Qu'attendez-vous de margin-bottom lorsque votre élément est positionné sur son côté supérieur ?

margin-bottom ne fera rien à un élément positionné en absoluteque si l'élément n'a pas de propriété top.

Answer 4

Vous devez définir le position sur relative afin de définir son margin.

Les margin-bottom, margin-left et margin-right NE FONCTIONNERONT PAS lorsque l'élément est en position: absolute.

Exemple : HTML :

<img src="whatever.png"/>

CSS :

img {
   position: relative;
   margin: 0 auto;
}

Answer 5

J'ai une position absolue et j'ai besoin de définir une marge à droite. ici, la façon dont je viens avec :

position:absolute;
  top:0px;
  left:10px;  
  width: calc(99% - 10px);
  height:80%;