Combinazione di float e margin in CSS

Attualmente il nostro testo è premuto contro l'immagine sul lato sinistro. Proviamo a spostare leggermente questo testo. Per farlo, impostiamo ai nostri paragrafi un margin sinistro di 30px, e al div genitore - un bordo rosso.

Improvvisamente si sposterà a destra solo il testo che è adiacente al div genitore, mentre il testo adiacente all'immagine - non si sposterà:

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

Результат:

Per capire perché succede questo, aggiungiamo ai paragrafi un bordo verde:

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

Результат:

Come possiamo vedere, in realtà i paragrafi si stanno spostando dal bordo sinistro, ma non dall'immagine, bensì dal div genitore. Per esaminarlo più in dettaglio, aggiungiamo anche una semitrasparenza all'immagine tramite la proprietà 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;
}

Результат:

Ora si vede chiaramente che la reazione a margin-left c'è, solo che i paragrafi in realtà sono posizionati sotto l'immagine. Togliamo il margine, lasciando comunque la semitrasparenza all'immagine:

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

Результат:

Ecco come appaiono in realtà i nostri paragrafi - il loro testo è spostato dall'immagine, ma fisicamente i paragrafi si trovano sotto l'immagine, questo è visibile dal bordo, che inizia dal bordo sinistro del div genitore.

Reinseriamo il margin e mettiamo l'immagine nel primo paragrafo:

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

Результат:

Ora l'immagine si muove insieme ai paragrafi!