Sự kết hợp giữa float và margin trong CSS

Hiện tại văn bản của chúng ta đang được ép sát vào phía bên trái của hình ảnh. Hãy thử di chuyển văn bản này ra xa một chút. Để làm điều đó, chúng ta sẽ đặt margin trái cho các đoạn văn là 30px, và đặt đường viền màu đỏ cho thẻ div cha.

Đột nhiên, chỉ có văn bản tiếp giáp với thẻ div cha là bị đẩy sang phải, còn văn bản tiếp giáp với hình ảnh thì không di chuyển:

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

Để hiểu tại sao lại như vậy, hãy thêm đường viền màu xanh lá cho các đoạn văn:

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

Như chúng ta thấy, thực tế các đoạn văn bị đẩy ra xa khỏi cạnh trái, nhưng không phải khỏi hình ảnh, mà là khỏi thẻ div cha. Để xem xét chi tiết hơn, hãy thêm độ trong suốt một nửa cho hình ảnh thông qua thuộc tính 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;
}

Bây giờ thì rõ ràng thấy rằng có phản ứng với margin-left, chỉ là các đoạn văn thực tế được đặt bên dưới hình ảnh. Hãy bỏ lề ra, nhưng vẫn giữ độ trong suốt một nửa cho hình ảnh:

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

Đây chính là cách các đoạn văn của chúng ta thực sự trông như thế nào - văn bản của chúng bị đẩy ra xa bởi hình ảnh, nhưng về mặt vật lý, các đoạn văn nằm bên dưới hình ảnh, điều này có thể thấy được thông qua đường viền, bắt đầu từ cạnh trái của thẻ div cha.

Hãy trả lại margin và đặt hình ảnh vào đoạn văn đầu tiê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;
}

Bây giờ hình ảnh di chuyển cùng với các đoạn văn!