Kombinacija float in margin v CSS

Trenutno je naš tekst prilepljen k sliki na levi strani. Poskusimo ta tekst nekoliko odmakniti. Za to bomo našim odstavkom nastavili levi margin na 30px, divu-staršu pa rdeč obrob.

Nepričakovano se bo v desno umaknil le tisti tekst, ki meji na div-starša, medtem ko se tekst, ki meji na sliko, ne bo premaknil:

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

Результат:

Da bi razumeli, zakaj je temu tako, dodajmo odstavkom zelen obrob:

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

Результат:

Kot vidimo, se odstavki dejansko odmikajo od levega roba, vendar ne od slike, temveč od div-starša. Za podrobnejši pregled dodajmo sliki še polprosojnost z lastnostjo 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;
}

Результат:

Zdaj je jasno vidno, da je odziv na margin-left prisoten, vendar so odstavki dejansko nameščeni pod sliko. Odstranimo odmik, a obdržimo polprosojnost slike:

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

Результат:

Tako dejansko izgledajo naši odstavki - njihov tekst je odrinjen s strani slike, vendar fizično ležijo odstavki pod sliko, kar je razvidno iz obrobe, ki se začne od levega roba div-starša.

Vrnimo margin in denimo sliko v prvi odstavek:

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

Результат:

Zdaj se slika premika skupaj z odstavki!