CSS-и ҷорӣ кардани float ва margin

Ҳоло матни мо ба тасвир аз тарафи чап фишор дода шудааст. Биёед кӯшиш кунем, ки ин матнро каме ҷо ба ҷо кунем. Барои ин, ба абзасҳои мо margin-и чапро дар 30px таъин мекунем, ва ба диви-падар - сарҳади сурх.

Гоҳино танҳо он матн, ки ба диви-падар пайваст аст, ба тарафи рост ҷо ба ҷо мешавад, ва матн, ки ба тасвир пайваст аст - ҷо ба ҷо намешавад:

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

Результат:

Барои фаҳмидани ин, ки чаро инҳам тавр аст, ба абзасҳо сарҳади сабз илова мекунем:

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 илова кунем:

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

Результат:

Акнун ба таври аниқ дида мешавад, ки вокуниш ба margin-left мавҷуд аст, танҳо абзасҳо дар асл ҷойгир шудаанд дар зери тасвир. Биёед фосиларо дур кунем, боқӣ гузоштани нимшаффофии тасвир:

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

Результат:

Абзасҳои мо дар асл чунинанд - матни онҳо аз тасвир ҷо ба ҷо шудааст, аммо аз рӯи ҷисмӣ абзасҳо дар зери тасвир ҷойгиранд, ин аз рӯи сарҳад дида мешавад, ки аз канори чапи диви-падар оғоз меёбад.

Биёед margin-ро баргардонем ва тасвирро ба абзаси аввал гузорем:

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

Результат:

Акнун тасвир бо абзасҳо якҷо ҳаракат мекунад!