Chiều rộng CSS của thẻ <span>

Tôi sử dụng <span>thẻ trong tiêu đề mô-đun của mình, ví dụ:

<span>Categories</span>.

Tôi chỉ định màu nền / hình ảnh, chiều rộng và chiều cao của span trong css.

Nhưng chiều rộng của span phụ thuộc vào nội dung / văn bản của nó.

Vì vậy, nếu tôi làm vậy <span></span>, chỉ với một hình ảnh / màu nền trong css, không có gì xuất hiện.

Tất nhiên, tôi muốn một cái gì đó xuất hiện.

Làm cách nào để giải quyết vấn đề này?

Bạn có thể đặt thuộc tính hiển thị thành "block" một cách rõ ràng để nó hoạt động giống như một phần tử cấp khối, nhưng trong trường hợp đó, bạn có thể chỉ nên sử dụng div để thay thế.

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

nhịp mặc định thành kiểu nội tuyến, mà bạn không thể chỉ định chiều rộng của.

display: inline-block;

sẽ là một cách tốt, ngoại trừ IE không hỗ trợ nó

tuy nhiên, bạn có thể hack nhiều giải pháp trình duyệt

Bạn không thể chỉ định chiều rộng của một phần tử có nội tuyến hiển thị. Bạn có thể đặt một cái gì đó vào nó như một khoảng trắng không ngắt () và sau đó đặt phần đệm để tạo thêm chiều rộng cho nó nhưng bạn không thể kiểm soát nó trực tiếp.

Bạn có thể sử dụng khối nội tuyến hiển thị nhưng điều đó không được hỗ trợ rộng rãi.

Một cuộc tấn công thực sự sẽ là đặt một hình ảnh bên trong và sau đó thiết lập chiều rộng của hình ảnh đó. Một cái gì đó giống như GIF 1 pixel trong suốt. Tuy nhiên, không phải là cách tiếp cận được khuyến nghị.

Tôi sẽ sử dụng paddingthuộc tính. Điều này sẽ cho phép bạn thêm một số lượng pixel đã đặt vào một trong hai bên của phần tử mà phần tử không làm mất chất lượng nhịp của nó:

• Nó sẽ không trở thành một khối
• Nó sẽ trôi như bạn mong đợi

Tuy nhiên, phương pháp này sẽ chỉ thêm vào phần đệm, vì vậy nếu bạn thay đổi độ dài của nội dung (ví dụ: từ Danh mục thành Thẻ) thì kích thước của nội dung sẽ thay đổi và kích thước tổng thể của phần tử cũng sẽ thay đổi. Nhưng nếu bạn thực sự muốn đặt một kích thước cứng nhắc, bạn nên làm như đã đề cập ở trên và sử dụng một div.

Xem mô hình hộp để biết thêm chi tiết về mô hình hộp, nội dung, phần đệm, lề, v.v.

Giống như trong các câu trả lời khác, hãy bắt đầu các thuộc tính span của bạn với điều này:

display:inline-block;  

Bây giờ bạn có thể sử dụng padding nhiều hơn chiều rộng:

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

Khi bạn sử dụng padding, màu của bạn sẽ mở rộng sang cả hai bên (phải và trái), không chỉ sang phải (như trong widht).

Sử dụng thuộc tính 'display' như trong ví dụ:

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

Sau khi cố định chiều cao và chiều rộng, bạn sẽ cho biết cách xử lý nếu văn bản bên trong nó tràn ra khỏi khu vực của nó. Vì vậy, hãy thêm vào css

tràn: tự động;