Combinatie van float en margin in CSS

Momenteel wordt onze tekst tegen de afbeelding aan de linkerkant aangedrukt. Laten we proberen deze tekst een beetje op te schuiven. Hiervoor geven we onze alinea's een linker margin van 30px, en de bovenliggende div - een rode rand.

Onverwacht zal alleen de tekst die grenst aan de bovenliggende div naar rechts opschuiven, terwijl de tekst die grenst aan de afbeelding - niet opschuift:

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

Om te begrijpen waarom dit zo is, voegen we een groene rand toe aan de alinea's:

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

Zoals we kunnen zien, schuiven de alinea's in werkelijkheid op van de linkerrand, maar niet van de afbeelding, maar van de bovenliggende div. Laten we, om dit in meer detail te bekijken, ook doorzichtigheid toevoegen aan de afbeelding via de eigenschap 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 is het duidelijk te zien dat er wel degelijk een reactie op margin-left is, alleen de alinea's zijn in werkelijkheid geplaatst onder de afbeelding. Laten we de marge weghalen, maar de doorzichtigheid van de afbeelding behouden:

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

Zo zien onze alinea's er in werkelijkheid uit - hun tekst is opgeschoven door de afbeelding, maar fysiek liggen de alinea's onder de afbeelding, dit is te zien aan de rand, die begint vanaf de linkerrand van de bovenliggende div.

Laten we de margin terugzetten en de afbeelding in de eerste alinea stoppen:

<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 beweegt de afbeelding mee met de alinea's!