Cách đặt thuộc tính chiều cao cho SPAN

Tôi cần làm cho mã sau có thể co giãn với chiều cao được xác định trước

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

Nhưng vì span là phần tử nội tuyến nên thuộc tính "height" sẽ không hoạt động.

Tôi đã thử sử dụng div thay thế, nhưng nó sẽ mở rộng lên đến chiều rộng của phần tử trên. Và chiều rộng phải linh hoạt.

Bất cứ ai có thể đề xuất bất kỳ giải pháp tốt cho điều này?

Cảm ơn trước.

Cung cấp cho nó display:inline-blocktrong CSS - điều đó sẽ cho phép nó làm những gì bạn muốn.
Về khả năng tương thích: IE6 / 7 sẽ hoạt động với điều này, như chế độ quirks gợi ý:

IE 6/7 chỉ chấp nhận giá trị trên các phần tử có hiển thị tự nhiên: nội tuyến.

Sử dụng

.title{
  display: inline-block;
  height: 25px;
}

Bí quyết duy nhất là hỗ trợ trình duyệt. Kiểm tra xem danh sách các trình duyệt được hỗ trợ của bạn có xử lý khối nội tuyến không tại đây .

điều này là để làm cho display: inline-block hoạt động trong tất cả các trình duyệt:

Thật kỳ lạ, trong IE (6/7), nếu bạn kích hoạt hasLayout với "zoom: 1" và sau đó đặt màn hình thành nội tuyến, nó sẽ hoạt động như một khối nội tuyến.

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

Giả sử bạn không muốn biến nó thành một phần tử khối, thì bạn có thể thử:

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

Nhưng giải pháp đơn giản nhất là chỉ cần chữa trị .titlenhư một yếu tố khối cấp, và sử dụng các thẻ tiêu đề thích hợp <h1>thông qua <h6>.

nhịp { display: table-cell; height: (your-height + px); vertical-align: middle; }

Để các nhịp hoạt động giống như ô bảng (hoặc bất kỳ phần tử nào khác, đối với vấn đề đó), chiều cao phải được chỉ định. Tôi đã cho các nhịp một chiều cao, và chúng hoạt động tốt - nhưng bạn phải thêm chiều cao để chúng làm những gì bạn muốn.

Tất nhiên, một tùy chọn khác là sử dụng Javascript (Jquery tại đây):

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

Tại sao bạn cần một khoảng trong trường hợp này? Nếu bạn muốn định dạng chiều cao, bạn có thể sử dụng div không? Bạn có thể thử một div với display: inline, mặc dù điều đó có thể có cùng một vấn đề vì trên thực tế, bạn đang làm điều tương tự như một khoảng.