Die kombinasie van float en padding in CSS

Laat ons weer die prentjie bo die paragrawe plaas, terwyl hulle steeds die linker padding behou. In hierdie geval sal die padding slegs die teks wat links aan die ouer-div grens, verskuif, en nie aan ons prentjie nie:

<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;
	padding-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

En nou, laat ons die prentjie in die eerste paragraaf plaas - dit sal saam met die teks van die paragrawe na regs beweeg:

<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;
	padding-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}