Kombination von float und padding in CSS

Lassen Sie uns das Bild wieder über den Absätzen platzieren, ihnen dabei aber einen linken padding belassen. In diesem Fall verschiebt der padding nur den Text, der links am Elterndiv anliegt, und nicht an unserem Bild:

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

Lassen Sie uns nun das Bild in den ersten Absatz einfügen - es wird sich zusammen mit dem Text der Absätze nach rechts bewegen:

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