Span 요소에서 높이 및 너비 속성이 작동하지 않는 이유는 무엇이며 어떻게 작동하게 할 수 있습니까?

Span 요소 및 높이/너비 속성

CSS에서 span 요소는 인라인 요소입니다. 즉, 고유한 너비나 높이가 없으며 콘텐츠를 수용하는 데 필요한 만큼의 공간만 차지합니다. 결과적으로, 범위 요소의 높이 및 너비 속성을 설정해도 아무런 효과가 없습니다.

그러나 표시 속성을 사용하면 범위 요소를 블록 수준 요소로 변환할 수 있습니다. 블록 수준 요소는 높이와 너비를 지정할 수 있으며 페이지의 직사각형 영역을 차지합니다.

span 요소를 버튼처럼 보이게 하려면 표시 속성을 inline-block 또는 block으로 설정할 수 있습니다. . 이렇게 하면 높이 및 너비 속성을 적용하고 필요에 따라 요소의 스타일을 지정할 수 있습니다.

다음은 표시 속성이 추가된 CSS 코드의 업데이트된 버전입니다.

span.product__specfield_8_arrow {
    display: inline-block; /* or block */
    background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

이번 변경으로 , 범위 요소는 블록 수준 요소처럼 동작하며 지정된 높이 및 너비 치수를 사용합니다.

위 내용은 Span 요소에서 높이 및 너비 속성이 작동하지 않는 이유는 무엇이며 어떻게 작동하게 할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!