Комбинација на float и padding во CSS

Да ја поставиме повторно сликата над параграфите, оставајќи им лев padding. Во овој случај padding ќе го помести само оној текст кој се наоѓа лево кон родителскиот div, a не кон нашата слика:

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

A сега да ја ставиме сликата во првиот параграф - таа ќе се движи надесно заедно со текстот на параграфите:

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