Float- ja margin-ominaisuuksien yhdistäminen CSS:ssä

Tällä hetkellä tekstimme on painautunut kuvan vasempaan reunaan. Yritetään siirtää tätä tekstiä hieman pois. Asetetaan tätä varten kappaleille vasen margin arvoon 30px, ja div-vanhemmalle - punainen reunus.

Yllättäen vain teksti, joka koskettaa div-vanhempaa, siirtyy oikealle, mutta kuvan vieressä oleva teksti ei siirry:

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

Результат:

Ymmärtääksemme miksi näin käy, lisätään kappaleille vihreä reunus:

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

Результат:

Kuten näemme, kappaleet todellisuudessa siirtyvät pois vasemmalta reunasta, mutta eivät kuvasta, vaan div-vanhemmalta. Nähdäksemme tarkemmin, lisätään kuvalle puoliläpinäkyvyys opacity-ominaisuudella:

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

Результат:

Nyt näemme varmasti, että reaktio margin-left-ominaisuuteen on olemassa, vain kappaleet ovat todellisuudessa sijoitettuna kuvan alle. Poistetaan marginaali, jättäen kuvan puoliläpinäkyvyys kuitenkin päälle:

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

Результат:

Näinhän kappaleemme todellisuudessa näyttävät - niiden teksti on siirtynyt kuvan vuoksi, mutta fyysisesti kappaleet sijaitsevat kuvan alla, tämä näkyy reunuksesta, joka alkaa div-vanhemman vasemmasta reunasta.

Palautetaan margin ja laitetaan kuva ensimmäisen kappaleen sisään:

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

Результат:

Nyt kuva liikkuu kappaleiden mukana!