Комбинација float и margin у CSS

Тренутно је наш текст притиснут уз слику са леве стране. Хајде да покушамо мало да померимо тај текст. За то ћемо нашим пасусима задати леви margin од 30px, а диву-родитељу - црвену границу.

Неочекивано ће се удесно померити само текст који приљега уз див-родитеља, а текст који приљега уз слику - неће се померити:

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;
}
img {
  float: left;
}

Результат:

Да бисмо разумели зашто је то тако, додајмо пасусима зелену границу:

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;
  border: 1px solid green;
}
img {
  float: left;
}

Результат:

Као што видимо, пасуси се у ствари померају од леве ивице, али не од слике, већ од дива-родитеља. Да бисмо детаљније размотрили, хајде да додамо још и полупроѕирност слици кроз својство opacity:

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;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Сада се јасно види да постоји реакција на margin-left, али су пасуси у ствари позиционирани испод слике. Хајде да уклонимо маргину, оставивши и даље полупроѕирност слици:

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 {
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Овако у ствари изгледају наши пасуси - њихов текст је померила слика, али физички пасуси леже испод слике, што се види по граници, која почиње од леве ивице дива-родитеља.

Хајде да вратимо margin и ставимо слику у први пасус:

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;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Сада се слика помера заједно са пасусима!