Hướng dẫn
Quảng cáo

Cách xóa khoảng trắng thừa bên dưới hình ảnh bằng CSS

Chủ đề: HTML / CSSBài trước|Bài tiếp

Trả lời: Sử dụng thuộc tính CSS display

Nếu bạn cố gắng đặt một hình ảnh bên trong một phần tử <div> có đường viền, bạn sẽ thấy thêm một khoảng trắng (khoảng 3px) ở cuối hình ảnh. Điều này xảy ra bởi vì hình ảnh là một phần tử cấp nội tuyến nên trình duyệt sẽ thêm một số khoảng trắng dưới đường cơ sở để điều chỉnh các phần tử nội tuyến khác.

Cách dễ nhất để loại bỏ vấn đề này là thay đổi giá trị mặc định display của hình ảnh từ nội dòng thành khối, tức là áp dụng kiểu display: block;trên hình ảnh, như được hiển thị bên dưới:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Space Below Images</title>
<style>
    .img-box{
        width: 125px;
        border: 4px solid #333;
    }
    .img-box img{
        display: block;
    }
</style>
</head>
<body>
    <div class="img-box">
        <img src="images/club.jpg" alt="Club Card">
    </div>
</body>
</html>

Câu hỏi liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này: