Float- ja margin-ominaisuuksien yhdistäminen CSS:ssä

Tällä hetkellä tekstimme on painautunut kuvan vasempaan reunaan. Yritetään siirtää tätä tekstiä hieman pois. Asetetaan tätä varten kappaleille vasen margin arvoon 30px, ja div-vanhemmalle - punainen reunus.

Yllättäen vain teksti, joka koskettaa div-vanhempaa, siirtyy oikealle, mutta kuvan vieressä oleva teksti ei siirry:

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

Ymmärtääksemme miksi näin käy, lisätään kappaleille vihreä reunus:

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

Kuten näemme, kappaleet todellisuudessa siirtyvät pois vasemmalta reunasta, mutta eivät kuvasta, vaan div-vanhemmalta. Nähdäksemme tarkemmin, lisätään kuvalle puoliläpinäkyvyys opacity-ominaisuudella:

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

Nyt näemme varmasti, että reaktio margin-left-ominaisuuteen on olemassa, vain kappaleet ovat todellisuudessa sijoitettuna kuvan alle. Poistetaan marginaali, jättäen kuvan puoliläpinäkyvyys kuitenkin päälle:

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

Näinhän kappaleemme todellisuudessa näyttävät - niiden teksti on siirtynyt kuvan vuoksi, mutta fyysisesti kappaleet sijaitsevat kuvan alla, tämä näkyy reunuksesta, joka alkaa div-vanhemman vasemmasta reunasta.

Palautetaan margin ja laitetaan kuva ensimmäisen kappaleen sisään:

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

Nyt kuva liikkuu kappaleiden mukana!