Kombination av float och margin i CSS

För närvarande är vår text tryckt mot bilden från vänster sida. Låt oss försöka flytta denna text lite. För att göra detta, sätt en vänster margin på våra stycken på 30px, och på föräldradiven - en röd kant.

Oväntat kommer bara texten som ligger intill föräldradiven att flyttas åt höger, medan texten som ligger intill bilden inte flyttas:

<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;
}

För att förstå varför det är så, låt oss lägga till en grön kant till styckena:

<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;
}

Som vi ser, flyttas styckena faktiskt från vänsterkanten, men inte från bilden, utan från föräldradiven. För att undersöka närmare, låt oss lägga till genomskinlighet till bilden genom egenskapen 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;
}

Nu ser vi tydligt att det finns en reaktion på margin-left, men styckena är faktiskt placerade under bilden. Låt oss ta bort marginalen, men behåll bildens genomskinlighet:

<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;
}

Så här ser våra stycken egentligen ut - deras text har flyttats av bilden, men fysiskt ligger styckena under bilden, vilket syns på kanten, som börjar från föräldradivens vänsterkant.

Låt oss återställa margin och stoppa in bilden i det första stycket:

<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;
}

Nu rör sig bilden tillsammans med styckena!