Khoảng trắng bí ẩn bên dưới thẻ img

10 tháng 10, 2015 - 2108 lượt xem

Khi sử dụng thẻ img để chèn ảnh vào trang web, 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ẻ img bởi 1 thẻ div (hoặc bất kỳ 1 thẻ nào khác) thì sẽ xuất hiện 1 khoảng trắng nhỏ ở bên dưới ảnh.

Học lập trình web HTML và CSS căn bản

Nếu chúng ta thiết lập padding 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 khoảng trắng này từ đâu mà có?

Học lập trình web HTML và CSS trực tuyến

Để hiểu rõ về vấn đề này, chúng ta phải nắm rõ về HTML, CSS, đặc biệt là khái niệm về Inline elementBlock element.

Mặc định thẻ img trong HTML là một Inline element, tức là nó được coi như là text. Do đó nó sẽ được browser xử lý như với text thông thường. Đến đây ta lại phải biết một chút về text, một số khái niệm về text trong kỹ thuật in ấn:

  • Trên cùng 1 dòng, các chữ cái sẽ 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)

    Học lập trình web HTML và CSS nâng cao

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, ta sẽ thấy rõ tại sao lại có khoảng trắng nhỏ bên dưới ảnh.

Học lập trình web HTML và CSS online

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 đó 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.

Tháng 02/2020 Techmaster tiếp tục tuyển sinh khoá Lộ trình đào tạo Web Frontend chuyên sâu (6 tháng - cam kết việc làm) tại cơ sở số 48 Tố Hữu, Hà Nội. Lộ trình học bao gồm nhiều khoá học nhỏ, được sắp xếp theo mức độ từ căn bản đến nâng cao, phù hợp với các bạn mới bắt đầu, chưa có nền tảng về CNTT, mong muốn tìm kiếm việc làm trong lĩnh vực lập trình web

Bên cạnh đó, Techmaster cũng đang tuyển sinh cho khoá Lập trình Java căn bản khai giảng vào ngày 10/02/2020 tại cơ sở Nguyễn Đình Chiểu. Khoá học dành cho người mới bắt đầu học lập trình, được thiết kế dễ hiểu, trực quan, gồm nhiều ví dụ code minh hoạ ngắn phù hợp với mọi đối tượng học viên nhập môn lập trình.

Bình luận

avatar
relaxwithart62 2020-03-21 12:22:56.097253+00
Có cái cho em tham khảo không ạ?

Đặng Quang Huy
Đặng Quang Huy 2021-01-13T11:02:12.325356+00:00
em code thử đi sẽ hiểu rõ hơn, cái này code ngắn thôi mà
Avatar
* Vui lòng trước khi bình luận.
Ảnh đại diện
 +39 Thích
+39