Ο συνδυασμός float και padding στο CSS

Ας τοποθετήσουμε ξανά την εικόνα πάνω από τις παραγράφους, αφήνοντάς τους ταυτόχρονα αριστερό padding. Σε αυτή την περίπτωση, το padding θα ωθήσει μόνο εκείνο το κείμενο που εφάπτεται αριστερά με το γονικό div, και όχι με την εικόνα μας:

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

Τώρα ας τοποθετήσουμε την εικόνα μέσα στην πρώτη παράγραφο - θα κινείται προς τα δεξιά μαζί με το κείμενο των παραγράφων:

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