Combinación de float y margin en CSS
Ahora nuestro texto está pegado a la imagen por el lado
izquierdo. Intentemos alejar un poco
este texto. Para ello, asignemos a nuestros párrafos
un margin izquierdo de 30px, y al div contenedor
- un borde rojo.
Inesperadamente, solo retrocederá hacia la derecha el texto que está adyacente al div contenedor, mientras que el texto adyacente a la imagen no se moverá:
<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;
}
:
Para entender por qué sucede esto, agreguemos un borde verde a los párrafos:
<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;
}
:
Como podemos ver, en realidad los párrafos se alejan
del borde izquierdo, pero no de la imagen, sino del div contenedor.
Para examinarlo más detenidamente, agreguemos
también semitransparencia a la imagen mediante la propiedad
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;
}
:
Ahora sí se ve claramente que hay reacción al margin-left,
solo que los párrafos en realidad están ubicados
debajo de la imagen. Quitemos el margen,
manteniendo la semitransparencia de la imagen:
<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;
}
:
Así es como se ven realmente nuestros párrafos - su texto es desplazado por la imagen, pero físicamente los párrafos yacen debajo de la imagen, esto se ve por el borde, que comienza desde el borde izquierdo del div contenedor.
Volvamos a poner el margin y metamos la imagen
en el primer párrafo:
<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;
}
:
¡Ahora la imagen se mueve junto con los párrafos!
