Kombinimi i float dhe margin në CSS

Tani teksti ynë është i shtypur nga ana e majtë e figurës. Le të përpiqemi ta largojmë pak këtë tekst. Për këtë, do t'u caktojmë paragrafëve tanë margin majtas prej 30px, ndërsa div-it prind - një kufi të kuq.

Papritmas, vetëm teksti që është ngjitur me div-in prind do të largohet djathtas, ndërsa teksti ngjitur me figurën - nuk do të largohet:

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

Результат:

Për të kuptuar pse ndodh kështu, le t'u shtojmë paragrafëve një kufi jeshil:

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

Результат:

Siç e shohim, në fakt paragrafët largohen nga buza e majtë, por jo nga figura, por nga div-i prind. Për ta shqyrtuar më në hollësi, le t'i shtojmë figurës gjysmë-transparencë përmes vetisë 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;
}

Результат:

Tani duket qartë se ka reagim ndaj margin-left, vetëm se paragrafët në fakt janë vendosur nën figurë. Le të heqim hapësirën, por ta lëmë figurën gjysmë-transparente:

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

Результат:

Kështu duken në të vërtetë paragrafët tanë - teksti i tyre është larguar nga figura, por fizikisht paragrafët shtrihen nën figurë, kjo duket nga kufiri i të cilit fillon nga buza e majtë e div-it prind.

Le të kthejmë margin dhe ta fusim figurën brenda paragrafit të parë:

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

Результат:

Tani figura lëviz së bashku me paragrafët!