Combinaison de float et margin en CSS
Actuellement, notre texte est collé à l'image sur le côté
gauche. Essayons de décaler un peu
ce texte. Pour ce faire, définissons une margin gauche
de 30px pour nos paragraphes,
et une bordure rouge pour le div parent.
Étonnamment, seul le texte adjacent au div parent va reculer vers la droite, alors que le texte adjacent à l'image ne reculera pas :
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
}
img {
float: left;
}
:
Pour comprendre pourquoi il en est ainsi, ajoutons une bordure verte aux paragraphes :
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
}
:
Comme nous pouvons le voir, en réalité, les paragraphes se décollent
du bord gauche, mais pas de l'image, ils se décollent du div parent.
Pour examiner cela plus en détail, ajoutons
également une semi-transparence à l'image via la propriété
opacity :
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Maintenant, on voit clairement qu'il y a une réaction au margin-left,
seulement les paragraphes sont en réalité placés
sous l'image. Retirons la marge, en
laissant la semi-transparence de l'image :
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Voici à quoi ressemblent réellement nos paragraphes - leur texte est décalé par l'image, mais physiquement les paragraphes se trouvent sous l'image, cela se voit grâce à la bordure qui commence à partir du bord gauche du div parent.
Rétablissons la margin et mettons l'image
dans le premier paragraphe :
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Maintenant, l'image se déplace avec les paragraphes !
