div bỏ qua chiều cao từ bảng định kiểu

Question

Điều này khiến tôi phát điên. Tôi dường như không thể kiểm soát chiều cao của div.down_arrow yếu tố dưới đây -

... 
<div id="filters"> 
    ... 
    <span>All</span> 
    <div class="down_arrow"> 
     <img src="images/down_arrow.png" alt=""/> 
    </div> 
    ... 
</div> 
... 

tôi đã có css sau -

#filters { 
    float: right; 
    padding: 24px 10px 0 0; 
} 

#filters div { 
    display: inline; 
} 

#filters div.down_arrow, 
#filters div.down_arrow img { 
    height: 12px; 
    width: 23px; 
} 

#filters div.down_arrow:hover ing { 
     opacity: 0; 
} 

Các công cụ phát triển săn cho tôi biết rằng chiều cao và chiều rộng của tôi div.down_arrow vẫn có hiệu lực (nghĩa là không có dòng thông qua các thuộc tính - không có gì khác là ghi đè chúng). Nhưng cửa sổ bật lên nhỏ trên màn hình hiển thị kích thước của div.down_arrow là 27px x 16px. Tôi có thể thấy rằng phần tử lớn hơn phần tử img nó chứa.

Tôi không hiểu điều gì đang xảy ra - có vẻ như chiều cao dường như được lấy từ phần tử nhịp trước đó (và tôi không biết điều gì ảnh hưởng đến chiều rộng).

Answer 1

Thay đổi display: inline;-display: inline-block;

Vấn đề là bạn chỉ có thể tự kiểm soát chiều rộng/chiều cao của các yếu tố khối, không phải yếu tố nội tuyến.

Answer 2

yếu tố inline không bị ảnh hưởng bởi chiều cao