Комбинација float и margin у CSS

Тренутно је наш текст притиснут уз слику са леве стране. Хајде да покушамо мало да померимо тај текст. За то ћемо нашим пасусима задати леви margin од 30px, а диву-родитељу - црвену границу.

Неочекивано ће се удесно померити само текст који приљега уз див-родитеља, а текст који приљега уз слику - неће се померити:

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

Да бисмо разумели зашто је то тако, додајмо пасусима зелену границу:

<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:

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

Сада се јасно види да постоји реакција на margin-left, али су пасуси у ствари позиционирани испод слике. Хајде да уклонимо маргину, оставивши и даље полупроѕирност слици:

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

Овако у ствари изгледају наши пасуси - њихов текст је померила слика, али физички пасуси леже испод слике, што се види по граници, која почиње од леве ивице дива-родитеља.

Хајде да вратимо margin и ставимо слику у први пасус:

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

Сада се слика помера заједно са пасусима!