Kombinácia float a margin v CSS

Teraz je náš text pritlačený k obrázku na ľavej strane. Skúsme tento text trochu posunúť. Na to nastavme našim odsekom ľavý margin na 30px a nadradenému divu - červený okraj.

Nečakane sa posunie doprava iba text, ktorý prilieha k nadradenému divu, zatiaľ čo text, ktorý prilieha k obrázku - sa neposunie:

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

Результат:

Aby sme pochopili, prečo je to tak, pridajme odsekom zelený okraj:

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

Результат:

Ako vidíme, v skutočnosti sa odseky odsúvajú od ľavého okraja, ale nie od obrázka, ale od nadradeného divu. Aby sme to videli podrobnejšie, pridajme ešte polopriehľadnosť obrázku pomocou vlastnosti 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;
}

Результат:

Teraz už jasne vidno, že reakcia na margin-left je, lenže odseky sú v skutočnosti umiestnené pod obrázkom. Zoberme si odsadenie, pričom necháme polopriehľadnosť obrázku:

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

Результат:

Takto v skutočnosti vyzerajú naše odseky - ich text je posunutý obrázkom, no fyzicky odseky ležia pod obrázkom, to je vidieť podľa okraja, ktorý začína od ľavého okraja nadradeného divu.

Vráťme margin a vložme obrázok do prvého odseku:

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

Результат:

Teraz sa obrázok pohybuje spolu s odsekmi!