Mchanganyiko wa float na margin katika CSS
Kwa sasa maandishi yetu yamegandamishwa kwenye picha upande wa
kushoto. Hebu tujaribu kuhamisha kidogo maandishi hayo. Ili kufanya hivyo, wacha tuweke
margin ya kushoto kwa aya zetu hadi 30px, na kwa mzazi div
- mipaka nyekundu.
Kwa kushangaza, maandishi tu yaliyo karibu na mzazi div ndio yatasogea kulia, wakati maandishi yaliyo karibu na picha - hayatasogea:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
}
img {
float: left;
}
:
Ili kuelewa kwa nini hii ni hivyo, wacha tuongeze mipaka ya kijani kwa aya:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
}
:
Kama tunavyoona, kwa kweli aya zinasogea
kutoka kwenye ukingo wa kushoto, lakini si kutoka kwenye picha, bali kutoka kwa mzazi div.
Ili kuchunguza kwa undani zaidi, wacha tuongeze
uwazi wa nusu kwa picha kwa kutumia sifa
opacity:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Sasa ndio tunaona wazi, kwamba athari kwa margin-left
ipo, lakini kwa kweli aya zimewekwa
chini ya picha. Wacha tuondoe kando, tukiacha
uwazi wa nusu wa picha:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Hivi ndivyo aya zetu zinavyoonekana kwa kweli - maandishi yake yameondolewa na picha, lakini kimwili aya ziko chini ya picha, hii inaonekana kwa mipaka, ambayo huanza kutoka ukingo wa kushoto wa mzazi div.
Wacha turudishe margin na tuingize picha
ndani ya aya ya kwanza:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Sasa picha inasogea pamoja na aya!
