SPAN의 높이 속성을 설정하는 방법

미리 정의 된 높이로 다음 코드를 확장 가능하게 만들어야합니다.

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

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

그러나 span 은 인라인 요소 이기 때문에 "height"속성은 작동하지 않습니다.

대신 div를 사용해 보았지만 위쪽 요소의 너비까지 확장됩니다. 그리고 너비는 유연해야합니다.

누구든지 이것에 대한 좋은 해결책을 제안 할 수 있습니까?

미리 감사드립니다.

그것을주고 display:inline-block당신이 원하는 것을 할 수 있도록해야 그 - CSS에.
호환성 측면에서 : IE6 / 7 은 쿼크 모드에서 다음과 같이 작동합니다.

IE 6/7은 자연스러운 디스플레이 인 인라인 요소에서만 값을 허용합니다.

사용하다

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

유일한 트릭은 브라우저 지원입니다. 지원되는 브라우저 목록이 여기에서 인라인 블록을 처리하는지 확인하세요 .

이것은 모든 브라우저에서 display : inline-block이 작동하도록하는 것입니다.

이상하게도 IE (6/7)에서 "zoom : 1"로 hasLayout을 트리거 한 다음 디스플레이를 인라인으로 설정하면 인라인 블록으로 작동합니다.

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

블록 요소로 만들고 싶지 않다고 가정하면 다음을 시도 할 수 있습니다.

.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;
}

그러나 가장 쉬운 해결책은 단순히를 .title블록 수준 요소로 처리하고를 통해 적절한 제목 태그 <h1>를 사용하는 것 <h6>입니다.

스팬 { display: table-cell; height: (your-height + px); vertical-align: middle; }

스팬이 테이블 셀 (또는 해당 문제에 대한 다른 요소)처럼 작동하려면 높이를 지정해야합니다. 스팬에 높이를 지정했는데 제대로 작동하지만 원하는 작업을 수행하려면 높이를 추가해야합니다.

물론 또 다른 옵션은 자바 스크립트 (Jquery here)를 사용하는 것입니다.

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

이 경우 왜 스팬이 필요합니까? 높이 스타일을 지정하려면 div를 사용할 수 있습니까? display: inline실제로 스팬과 동일한 작업을 수행하므로 동일한 문제가있을 수 있지만 으로 div를 시도 할 수 있습니다 .