Khắc phục nhanh:
Để xóa khoảng cách dưới hình ảnh , bạn có thể:
- Đặt thuộc tính căn chỉnh dọc của hình ảnh thành
vertical-align: bottom; vertical-align: top;hoặcvertical-align: middle;
- Đặt thuộc tính hiển thị của hình ảnh thành
display:block;
Xem mã sau đây để xem bản demo trực tiếp:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Giải thích: tại sao có một khoảng trống dưới hình ảnh?
Khoảng trống hoặc không gian thừa dưới hình ảnh không phải là một lỗi hoặc vấn đề, đó là hành vi mặc định. Nguyên nhân sâu xa là hình ảnh là các yếu tố được thay thế ( xem các yếu tố thay thế MDN ). Điều này cho phép họ "hành động như hình ảnh" và có kích thước nội tại, tỷ lệ khung hình riêng ....
Trình duyệt tính toán thuộc tính hiển thị của họ inlinenhưng họ cung cấp cho họ một hành vi đặc biệt khiến họ gần gũi hơn với inline-blockcác yếu tố (như bạn có thể căn chỉnh chúng theo chiều dọc, đưa ra chúng có chiều cao, lề trên / dưới và phần đệm, biến đổi ...).
Điều này cũng có nghĩa là:
<img>không có đường cơ sở, vì vậy khi hình ảnh được sử dụng trong ngữ cảnh định dạng nội tuyến với dọc-align: baseline, phần dưới của hình ảnh sẽ được đặt trên đường cơ sở văn bản.
( nguồn: MDN , nhấn mạnh của tôi )
Vì các trình duyệt theo mặc định sẽ tính toán thuộc tính dọc cho đường cơ sở, đây là hành vi mặc định. Hình ảnh sau đây cho thấy đường cơ sở nằm trên văn bản:
( Nguồn hình ảnh )
Các yếu tố căn chỉnh đường cơ sở cần giữ không gian cho con cháu kéo dài bên dưới đường cơ sở (như j, p, g ...) như bạn có thể thấy trong hình trên. Trong cấu hình này, phần dưới của hình ảnh được căn chỉnh trên đường cơ sở như bạn có thể thấy trong ví dụ này:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
Đây là lý do tại sao hành vi mặc định của <img>thẻ tạo ra một khoảng trống ở dưới cùng của vùng chứa của nó và tại sao việc thay đổi thuộc tính căn chỉnh dọc hoặc thuộc tính hiển thị sẽ xóa nó như trong bản demo sau:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
