CSS में float और padding का संयोजन

चलिए फिर से छवि को पैराग्राफ के ऊपर रखते हैं, लेकिन उन्हें बाएं padding देते हुए। इस मामले में padding केवल उस टेक्स्ट को ही हटाएगा जो बाईं ओर से पैरेंट डिव से सटा हुआ है, न कि हमारी छवि से:

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