Kombinacija float i margin u CSS-u

Trenutno je naš tekst pritisnut uz sliku sa leve strane. Pokušajmo malo da odmaknemo ovaj tekst. Za to ćemo postaviti levi margin od 30px našim paragrafima, a div-u-roditelju - crvenu granicu.

Iznenada će se udesno odmaknuti samo tekst koji je uz div-roditelj, a tekst koji je uz slicu - neće se odmaknuti:

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 bismo razumeli zašto je to tako, dodajmo paragrafima zelenu granicu:

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

Результат:

Kao što vidimo, zapravo se paragrafi odmiču od levog ivica, ali ne od slike, već od div-roditelja. Da bismo detaljnije razmotrili, dodajmo još i poluprovidnost slici kroz svojstvo 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;
}

Результат:

Sada je sasvim jasno vidljivo da reakcija na margin-left postoji, samo su paragrafi zapravo smešteni ispod slike. Uklonimo margine, ostavljajući pritom poluprovidnost 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 zapravo izgledaju naši paragrafi - njihov tekst je odmaknut od strane slike, ali fizički paragrafi leže ispod slike, što se vidi po granici koja počinje od levog ivice div-roditelja.

Vratimo margin i ubacimo sliku u prvi paragraf:

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

Результат:

Sada se slika kreće zajedno sa paragrafima!