Không gian dưới <img> tag

Question

Tôi có không gian gây phiền nhiễu này dưới ảnh của tôi mà không có lý do gì. Tôi đang sử dụng www.getskeleton.com làm khung.

HTML code

<div class="four columns bottom"> 
    <div class="box"> 
    <img src="images/picture.png" title="" alt=""> 
    </div> 
</div> 

mã CSS

.box{ 
    border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/ 
} 

Answer 1

Mặc dù tôi chắc chắn điều này từ đó đã được giải quyết, tôi tin rằng không ai trong số những câu trả lời là đúng (hoặc ít nhất, liên kết từ câu trả lời "được chấp nhận" đã chết).

Cách để giải quyết vấn đề khoảng cách này (và tại sao nó không được đặt trong các thư viện util như bình thường hóa tôi không chắc chắn) là căn chỉnh thẳng đứng của hình ảnh. Điều này sẽ giải quyết nó cho các trang HTML khi sử dụng loại tài liệu HTML 5. Thật kỳ lạ, khi sử dụng, ví dụ: loại tài liệu HTML 4.01, hình ảnh sẽ không hiển thị không gian không đúng này bên dưới hành vi.

Việc sửa chữa:

img { 
    vertical-align: top; 
} 

Tôi hy vọng rằng sẽ giúp ai đó có thể đã chạy vào vấn đề này.

Chỉnh sửa: Một số thông tin bổ sung mà tôi nhận thấy sau khi viết bài này và sau đó nghiên cứu tại sao bình thường hóa không đặt căn chỉnh trên thẻ img; căn chỉnh mặc định cho hình ảnh là vertical-align: baseline; - đó là hành vi giới thiệu không gian bên dưới. Tác giả của Normalize tin rằng hành vi này là trình duyệt chéo nhất quán, và do đó đã quyết định không 'bình thường hóa' điều này. Tôi cho rằng điều đó có ý nghĩa nếu bạn muốn văn bản ngồi bên cạnh một hình ảnh để căn chỉnh đúng với bất kỳ dòng văn bản tiếp theo nào. Một số người cũng thích sử dụng vertical-align: middle như trái ngược với đầu để giải quyết vấn đề này - vì vậy bạn có thể thay đổi điều này như bạn muốn.

Tuy nhiên, về căn chỉnh đường cơ sở, trong trường hợp tôi có hình ảnh quá lớn so với chiều cao dòng, có thể tôi sẽ thả nổi hoặc một số hành vi khác ... nhưng có bạn đi.

Tôi đã sử dụng công cụ căn chỉnh theo chiều dọc trong một thời gian mà không gặp bất kỳ sự cố nào. Nhưng như mọi khi, hãy đảm bảo bạn kiểm tra xem có bất kỳ hậu quả nào đối với hình ảnh không còn được căn chỉnh cho đường cơ sở hay không.

Answer 2

Hãy thử điều này:

.box img { 
    display: block; 
    padding: 0px; 
    margin: 0px; 
} 

Answer 3

Hãy thử cách này: .box {font-size: 0; }

Answer 4

Hình ảnh của bạn cần được thả nổi. Hãy thử điều này:

#yourimage{ 
     float: left;} 

Answer 5

Như đã đề cập, nhiều thông tin sẽ giúp rất nhiều nhưng tôi không có nghi ngờ rằng nó là đệm đó gây ra biên giới để đi ra ngoài của hình ảnh, lý do đặt rất đơn giản là

margin pushes outside the element 
padding pushes inside the element 

như cũ.

Fix thì:

.box { 
    padding-bottom: 0px; 
} 
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help 
.box img { 
    margin-bottom: 0px; 
} 

Answer 6

Đó là một tuổi đứa cũ - khoảng trắng từ định dạng dòng của bạn đang gây ra sự chênh lệch. Thêm <br /> sau hình ảnh.

Answer 7

Sử dụng bất kỳ trong bốn bản vá để loại bỏ các khoảng trống dưới hình ảnh http://www.visibilityinherit.com/code/gap-under-image-example.php