태그

태그 의 CSS 너비

---

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

<span>Categories</span>.

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

그러나 범위의 너비는 내용 / 텍스트에 따라 문서.

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

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

어떻게 어떻게 수 있습니까?

---

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

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

---

스팬은 너비를 기본적으로 조정합니다.

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>

---

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

오버플로 : 자동;

참고 URL : https://stackoverflow.com/questions/621401/css-width-of-a-span-tag