CSS에서 float와 padding의 조합

단락에 왼쪽 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;
}