<span> 태그의 CSS 너비

<span>모듈 제목에 태그를 사용 합니다. 예 :

<span>Categories</span>.

범위의 배경색 / 이미지, 너비 및 높이를 CSS로 지정합니다.

그러나 범위의 너비는 내용 / 텍스트에 따라 다릅니다.

따라서 <span></span>css의 배경 이미지 / 색상 만 사용하면 아무것도 나타나지 않습니다.

물론 뭔가 나타나길 원합니다.

어떻게 해결할 수 있습니까?

표시 속성을 "block"으로 명시 적으로 설정하여 블록 수준 요소처럼 작동하도록 할 수 있지만이 경우에는 div를 대신 사용해야합니다.

<span style="display:block; background-color:red; width:100px;"></span>

spans는 너비를 지정할 수없는 인라인 스타일로 기본 설정됩니다.

display: inline-block;

IE가 지원하지 않는 것을 제외하고는 좋은 방법이 될 것입니다.

그러나 여러 브라우저 솔루션을 해킹 할 수 있습니다.

인라인으로 표시되는 요소의 너비를 지정할 수 없습니다. 끊기지 않는 공백 ()과 같은 것을 넣은 다음 패딩을 설정하여 너비를 늘릴 수 있지만 직접 제어 할 수는 없습니다.

디스플레이 인라인 블록을 사용할 수 있지만 널리 지원되지는 않습니다.

진짜 해킹은 이미지를 내부에 넣고 너비를 설정하는 것입니다. 투명한 1 픽셀 GIF와 같은 것입니다. 그러나 권장되는 접근 방식은 아닙니다.

padding속성 을 사용 합니다. 이렇게하면 요소가 스팬 품질을 잃지 않고 요소의 양쪽에 설정된 수의 픽셀을 추가 할 수 있습니다.

• 블록이되지 않을거야
• 예상대로 떠있을 것입니다

그러나이 방법은 패딩에만 추가되므로 콘텐츠 길이를 변경하면 (예 : 카테고리에서 태그로) 콘텐츠의 크기가 변경되고 요소의 전체 크기도 변경됩니다. 그러나 정말로 딱딱한 크기를 설정하고 싶다면 위에서 언급 한대로하고 div를 사용해야합니다.

참고 항목 상자 모델을 등 박스 모델, 내용, 패딩, 마진에 대한 자세한 내용은

다른 답변과 마찬가지로 다음과 같이 범위 속성을 시작하십시오.

display:inline-block;  

이제 너비보다 더 많은 패딩 을 사용할 수 있습니다 .

padding-left:6%;
padding-right:6%;

패딩을 사용하면 색상이 오른쪽 (예 : widht)이 아닌 양쪽 (오른쪽 및 왼쪽)으로 확장됩니다 .

예와 같이 'display'속성을 사용하십시오.

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

높이와 너비를 고정하고 내부 텍스트가 해당 영역을 넘을 경우 방지하는 방법을 알려줍니다. 그래서 CSS를 추가하십시오

오버플로 : 자동;