Chắc hẳn khi sử dụng thẻ img trong HTML bạn đã biết công dụng có nó là hiển thị ra một hình ảnh rồi chứ nhỉ? Nhưng bạn đã từng để ý tới bên dưới thẻ img có một khoảng trống kỳ lạ không?

Một điều khá thú vị và mới lạ khi ít ai để ý tới nó đấy nhỉ?

Khoảng trắng xuất hiện

Bắt đầu thử nghiệm bằng cách bọc thẻ div quanh nó và cho nó border xung quanh.

<div>
	<img src="URL hình ảnh" alt="">
</div>

Bạn thấy chứ, khoảng trắng xuất hiện bên dưới hình ảnh kìa 😱😱

Vậy nếu chúng ta cho padding liệu rằng khoảng trắng kia có mất đi không?

Vậy là chúng không hề thay đổi chút nào, vẫn có một khoảng trắng bên dưới. Vậy bạn biết tại sao lại có một khoảng trắng như thế không?

Nắm bắt vấn đề

Trước hết bạn cần hiểu rõ khái niệm về Block elements và Inline elements.

Mặc định của thẻ img là một Inline elements, tức chúng được ví như là một text.

text nằm trên cùng một đường thẳng, chúng được gọi là baseline. Đó cũng chính là giá trị mặc định của thuộc tính vertical-align trong CSS

Một số chữ cái có phần dưới baseline như g, y, q, ..., chúng được gọi là descenders, phần trên text được gọi là ascenders.

Như vậy, trình duyệt họ đã tạo một khoảng trắng dành cho phần descenders của text. Ta có thể thấy rõ việc trình duyệt đã đặt riêng khoảng trắng cho text.

<div>
	<img src="URL hình ảnh" alt="">
    y q g j
</div>

Cách xử lý

Sau khi nắm bắt được vấn đề, để xử lý khoảng trắng đó, ta có thể dùng cách sau:

• Dùng thuộc tính vertical-align cho thẻ img với giá trị là middle.
• Dùng thuộc tính line-height cho thẻ div với giá trị là 0.
• Chuyển img thành Block elements với thuộc tính display giá trị là block.

Github: https://github.com/lamsaodecode/

MOMO: +84393.932.114

Facebook: https://fb.com/lamsaodecode/