2011-12-15 29 views
12

Tôi tự hỏi tại sao có không gian theo chiều dọc giữa các viền cho cạnh dưới của hình ảnh và chứa div trong những điều sau đây:Tại sao div bộ chứa này cao hơn yêu cầu để bao bọc hình ảnh chứa?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook--> 
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<title>test</title> 

<style> 

    .box { 
     border:1px solid black; 
    } 

    .image { 
     border:1px solid red; 
    } 

</style> 

</head> 

<body> 
    <div class="box"> 
     <img class="image" src="http://i.imgur.com/o2udo.jpg" /> 
    </div> 
</body> 
</html> 
+0

Bạn có một tài liệu HTML 4.01, nhưng phần còn lại của tài liệu là một tài liệu XML nhiều không gian tên. Điều đó không có nhiều ý nghĩa. – Quentin

+0

@Quentin sẽ thích hợp hơn khi sử dụng ''? – jela

+0

Cho rằng bạn đang trộn các không gian tên, bạn nên sử dụng một DTD bao gồm các phần tử bạn đang sử dụng từ cả hai. – Quentin

Trả lời

38

hình ảnh là, theo mặc định, các yếu tố inline-thay thế. Điều này có nghĩa là chúng được đối xử như những nhân vật.

Một số ký tự (chẳng hạn như pq) có con cháu. Một số (chẳng hạn như ad) thì không. Hình ảnh giống như hình ảnh sau.

Cần có khoảng trống bên dưới dòng để phần hạ xuống xuống. Đó là khoảng cách bạn đang thấy.

Bạn có thể tạo một hình ảnh display: block hoặc điều chỉnh thuộc tính vertical-align của mình để thay đổi điều này.

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