Khoảng trắng dưới thẻ HTML, IMG là do đâu?

Khi thiết kế website sử dụng thẻ HTML img để chèn ảnh, có 1 hiện tượng khá thú vị mà không phải ai cũng biết hoặc để ý đến. Đó là nếu bọc thẻ HTML img bởi một thẻ HTML div (hoặc bất kỳ một thẻ HTML nào khác) thì sẽ xuất hiện một khoảng trắng nhỏ ở bên dưới ảnh. Vậy lý do vì sao khoảng trắng này xuất hiện chúng ta hãy cùng tìm hiểu ở bài viết dưới đây:

>>> Có thể bạn quan tâm:
     -   Đào tạo đồ họa in ấn
     -   Đào tạo quản trị web

Nếu chúng ta thiết lập thuộc tính padding có 4 góc bằng nhau cho thẻ div, thì do khoảng trắng này mà khoảng cách phần bên dưới vẫn lớn hơn phần bên trên. Vậy lý do khoảng trắng đó xuất hiện là do đâu?

Tại sao thẻ HTML IMG có khoảng trắng bí ẩn bên dưới 

Trong kĩ thuật in ấn, trên cùng 1 dòng, các chữ cái nằm trên một đường thẳng gọi là baseline (đó cũng là giá trị mặc định của thuộc tính vertical-align trong CSS)
Một số chữ cái, ký tự đặc biệt sẽ có 1 phần nằm dưới baseline ví dụ như y, j, p, g, … và phần nằm dưới đó gọi là descenders (tương tự, có 1 phần nằm trên text gọi là ascenders)

Do đó trình duyệt sẽ tạo ra 1 khoảng trắng dành cho phần descenders của text, nếu chúng ta viết thêm 1 vài ký tự có descenders vào bên cạnh ảnh và tăng font-size của chúng lên, chúng ta sẽ thấy rõ tại sao lại có khoảng trắng nhỏ bên dưới ảnh.

Tại sao thẻ HTML IMG có khoảng trắng bên dưới - 4

Vậy là chúng ta đã khám phá được khoảng trắng bí ẩn bên dưới thẻ img. Và để xử lý khoảng trắng đó chúng ta có thể dùng các 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 element với thuộc tính display.

>>> Xem thêm:
    -   Đào tạo quản trị web
    -   Đào tạo lập trình PHP