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:
- Tạo danh sách tùy chỉnh ul li với hình ảnh?
- Làm sao để thay đổi kích thước hình ảnh bằng CSS?
- Hướng dẫn cách làm nổi bật nền của hàng trong bảng luân phiên bằng CSS
- Độ dài tối đa của tiêu đề và thẻ mô tả trong HTML cho SEO là bao nhiêu
- Cách hiển thị và ẩn menu thả xuống khi di chuột bằng CSS
Advertisements