CSS에서 float와 padding의 조합

단락에 왼쪽 padding을 남기면서, 이미지를 단락 위쪽에 다시 배치해 봅시다. 이 경우 padding은 왼쪽에 부모 div에 인접한 텍스트만 밀어내고, 우리 이미지 옆의 텍스트는 밀어내지 않습니다:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат:

이제 이미지를 첫 번째 단락 안에 넣어 봅시다. 이미지는 단락의 텍스트와 함께 오른쪽으로 이동할 것입니다:

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат: