A float és margin kombinálása CSS-ben

Jelenleg a szövegünk a bal oldalról van illesztve a képhez. Próbáljuk meg egy kicsit eltolni ezt a szöveget. Ehhez adjuk meg a bekezdéseinknek bal oldali margin-et 30px-ben, a szülő div-nek pedig piros szegélyt.

Váratlanul csak az a szöveg tolódik el jobbra, amely a szülő div-hez ér, azonban a képhez illeszkedő szöveg nem mozdul el:

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

Результат:

Hogy megértsük, miért van ez így, adjunk a bekezdéseknek zöld szegélyt:

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

Результат:

Amint látjuk, valójában a bekezdések a bal széltől távolodnak el, de nem a képtől, hanem a szülő div-től. Hogy részletesebben megvizsgálhassuk, adjunk hozzá átlátszóságot a képnek a opacity tulajdonság segítségével:

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

Результат:

Most már pontosan látszik, hogy van reakció a margin-left-re, csak a bekezdések valójában a kép alatt helyezkednek el. Távolítsuk el a margót, de hagyjuk meg a kép félig áttetszőségét:

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

Результат:

Így néznek ki valójában a bekezdéseink - a szövegük a kép miatt el van tolva, de fizikailag a bekezdések a kép alatt helyezkednek el, ez látható a szegélyen, amely a szülő div bal szélétől indul.

Térjünk vissza a margin-hez és tegyük a képet az első bekezdésbe:

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

Результат:

Most a kép a bekezdésekkel együtt mozog!