web-dev-qa-db-fra.com

Marge droite cassée sur largeur 100%

J'ai un DIV contenant une image et un deuxième DIV. La DIV parent est définie sur position: absolute; et la DIV enfant est définie sur position: relative. L'idée est que j'affiche la légende de ma photo au-dessus de mon image.

L'enfant DIV devrait avoir 100% largeur du parent, moins 10px à gauche, à droite et en bas, plus un arrière-plan noir.

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

La marge de gauche bousille .photo-caption en dehors des limites de .article-container. La marge droite ne semble pas avoir d'effet.

J'ai aussi essayé de résoudre ce problème avec box-sizing. Il semble que la largeur de .photo-caption soit inférieure à la largeur du parent, mais il y a toujours le dépassement.

htmlcsspositionmargin
24
Olly F

Un élément en position absolue est positionné avec top, left, right et bottom, pas avec margin.

15
Sven Bieder

C'est mieux si vous supprimez width:100%. écris comme ceci:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }
23
sandeep

Le problème est que width=100% donnerait à photo-caption la largeur exacte de article-container; l'ajout de marges (ou de marges) n'affectera pas le calcul de la largeur. Vous pouvez le faire vous-même en utilisant la css calc() afin que le style devienne:

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

Notez que vous voudrez peut-être vérifier le support du navigateur calc () ici

6
Ali

Utilisez soit padding en conjonction avec box-sizing, soit un bloc imbriqué avec des marges à l'intérieur de votre un en position absolue sans marges.

2
Marat Tanalin

Vous n'avez pas besoin de largeur: 100% si vous affichez bloc. Cela pourrait résoudre tous ces petits problèmes. 

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }
1
Wesley Terry

Pour:

Réponse simple: n'essayez pas d'utiliser la marge droite. Utilisez 'margin-left: xxxpx; '- Faites en sorte que le xxx soit assez grand pour pousser votre div box (Style div = = box) aussi loin que nécessaire. Pas besoin de violon, pouvez le mettre exactement où vous le voulez.

1
Will Morledge

Le problème est que vous définissez votre largeur à 100%, ce qui ne laisse aucune marge pour les marges. Ajustez plutôt votre largeur à un pourcentage inférieur à 100%, puis spécifiez votre marge comme la moitié du pourcentage de l’espace restant.

Par exemple: 

style="width:98%; margin-left: 1%;"
1
Versatile

La marge est la distance de chaque côté à l'élément voisin OR les limites du document.

La marge droite ne signifie pas qu'il va pousser l'élément vers la gauche. Cela signifie qu'il va générer de l'espace sur le côté droit.Si le prochain élément va venir, il viendra après la mention de marge- droite. est disponible pour marge droite.

Point de confusion: 1) L'effet visuel est différent où largeur est automatique.La même marge est générée en droite.Mais en raison de l'absence de propriété width.Width est libre de changer.

2) Même effet lorsque l'élément est flotté à droite. 

Ces 2 points mentionnés ci-dessus donneront une image différente de la marge à l’esprit. 

0
Parshant