Kết hợp float và padding trong CSS

Hãy một lần nữa đặt hình ảnh phía trên các đoạn văn, đồng thời để lại padding bên trái cho chúng. Trong trường hợp này, padding sẽ chỉ đẩy văn bản tiếp giáp bên trái với div cha, chứ không phải với hình ảnh của chúng ta:

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

Bây giờ hãy đặt hình ảnh vào đoạn văn đầu tiên - nó sẽ di chuyển sang phải cùng với văn bản của các đoạn văn:

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