Tại sao có khoảng cách giữa hình ảnh của tôi và hộp chứa của nó?

Khi trình duyệt của tôi hiển thị trường hợp kiểm tra sau, có một khoảng trống bên dưới hình ảnh. Từ sự hiểu biết của tôi về CSS, dưới cùng của hộp màu xanh nên chạm vào dưới cùng của hộp màu đỏ. Nhưng đó không phải là trường hợp. Tại sao?Tại sao có khoảng cách giữa hình ảnh của tôi và hộp chứa của nó?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head><title>foo</title></head> 
<body> 

<div style="border: solid blue 2px; padding: 0px;"> 

    <img alt='' style="border: solid red 2px; margin: 0px;" 
    src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" /> 

</div> 

</body> 
</html>

Nguồn

2008-09-24 raldi

Các phần tử nội tuyến được căn chỉnh theo chiều dọc đến đường cơ sở, chứ không phải dưới cùng của hộp chứa. Điều này là do văn bản cần một lượng nhỏ không gian bên dưới cho hậu duệ - các đuôi trên các chữ cái như chữ thường 'p'. Vì vậy, có một dòng tưởng tượng một khoảng cách ngắn phía trên dưới cùng, được gọi là đường cơ sở và các phần tử nội tuyến được căn chỉnh theo chiều dọc với nó theo mặc định.

Có hai cách để khắc phục sự cố này. Bạn có thể chỉ định rằng hình ảnh phải được căn chỉnh theo chiều dọc ở phía dưới, hoặc bạn có thể đặt nó thành một phần tử khối, trong trường hợp đó nó không còn được coi là một phần của văn bản. Ngoài ra, Internet Explorer có một lỗi phân tích cú pháp HTML không bỏ qua khoảng trống sau dấu sau phần tử đóng, vì vậy việc loại bỏ khoảng trắng này có thể cần thiết nếu bạn gặp sự cố với khả năng tương thích với Internet Explorer.

Nguồn

2008-09-24 20:01:54 Jim

Điều đó trả lời hoàn toàn mọi thứ tôi thắc mắc. Lam tôt lăm. – raldi

Sau 7 năm, điều này đã giúp tôi tiết kiệm rất nhiều thời gian. Cảm ơn! –

Bởi vì hình ảnh nằm bên trong nó nằm trên đường cơ sở. Hãy thử

vertical-align: bottom;

Cách khác, trong IE đôi khi nếu bạn có khoảng trắng xung quanh hình ảnh bạn nhận được. Vì vậy, nếu bạn loại bỏ tất cả khoảng trắng giữa thẻ div và thẻ img, điều đó có thể giải quyết được.

Nguồn

2008-09-24 19:43:45

Bạn có thể giải thích câu đầu tiên của mình thêm một chút không? Tại sao hình ảnh ngồi trên đường cơ sở gây ra một khoảng trống, và tại sao thay đổi căn chỉnh dọc của nó khắc phục vấn đề? – raldi

Jim đã làm rất tốt! –

Xóa ngắt dòng trước thẻ, sao cho thẻ đó trực tiếp theo thẻ không có khoảng trắng giữa thẻ.

Tôi không biết tại sao, nhưng đối với Internet Explorer, tính năng này hoạt động.

Nguồn

2008-09-24 19:46:50

Chỉ cần làm rõ - điều này không hoạt động trong FF3 – rcreswick

display: block

trong hình ảnh sửa chữa nó là tốt, nhưng có lẽ phá vỡ nó theo những cách khác;)

Nguồn

2008-09-24 19:46:56

Bất kỳ ai có thể xác minh/tranh chấp điều này sẽ phá vỡ những thứ khác không? – rcreswick

Điều đó có nghĩa là hình ảnh sẽ hoạt động như một khối, vì vậy bất kỳ yếu tố nào phải tuân theo nội tuyến sẽ xuất hiện trên dòng có sẵn tiếp theo –

line-height: 0; trên phụ huynh DIV bản sửa lỗi này cho tôi. Có lẽ, điều này có nghĩa là chiều cao dòng mặc định không phải là 0.

Nguồn

2008-09-24 19:52:01 ceejayoz

font-size:0; trên DIV gốc là một cách khó khăn khác để khắc phục.

Nguồn

2008-09-24 21:05:55

Tại sao có khoảng cách giữa hình ảnh của tôi và hộp chứa của nó?

Trả lời

Các vấn đề liên quan