Sự khác biệt giữa các thẻ <span> và <div> là gì?


15

Tôi tò mò, thẻ span dường như hoạt động giống như một div.

Câu trả lời:


22

Sự khác biệt chính là <span>thẻ là một yếu tố nội tuyến , trong khi <div>thẻ là một yếu tố cấp khối .

Hai phần tử mức khối (div) sẽ được hiển thị lần lượt theo chiều dọc, trong khi hai phần tử nội tuyến (nhịp) sẽ được hiển thị lần lượt theo chiều ngang.

Để hiểu sự khác biệt về thuật ngữ trực quan, có thể giúp nghĩ về <span>yếu tố này như một từ và <div>yếu tố như một đoạn văn: div thường được sử dụng để bố trí các khối nội dung. Các nhịp thường được sử dụng để làm nổi bật các nhóm từ trong nội dung đó.


11

Cả Nick và Toby đều đã trả lời câu hỏi của bạn một cách độc đáo, nhưng để đưa nó lên một cấp độ nữa.

Theo mặc định, <div>s là các phần tử khối và <span>s là các phần tử nội tuyến. Đây là những thẻ chung đơn giản cung cấp khối hoặc khối chứa nội tuyến. Trong thực tế, những cái này có thể được xoắn thông qua CSS để có thể thay thế cho nhau bằng cách đặt thuộc tính css hiển thị thành 'block', 'inline' hoặc thậm chí là 'inline-block' (trong số những thứ khác).

Tuy nhiên, uốn cong chúng để hành động như nhau không được khuyến khích. Và, có các quy tắc trong HTML thực sự ngăn chặn việc sử dụng các yếu tố cấp khối bên trong các yếu tố khác (chủ yếu là các yếu tố nội tuyến như <a>thẻ), vì vậy, bạn nên cố gắng sử dụng đúng thẻ khi phù hợp và chỉ cố gắng ghi đè hành vi của chúng khi hoàn toàn cần thiết.

Hãy thử nghĩ về chúng như các yếu tố ngữ nghĩa. <span>Ví dụ, sử dụng khi bạn muốn gắn thẻ nội dung được sử dụng bên trong các khối văn bản và sử dụng <div>khi bạn cần thêm cấu trúc bổ sung vào chính trang đó.

Đã nói điều này, HTML5 có rất nhiều yếu tố ngữ nghĩa sẽ làm giảm đáng kể nhu cầu sử dụng một trong hai thẻ chung này. Sử dụng các thẻ ngữ nghĩa được khuyến khích cao hơn việc thêm số lượng lớn các div và nhịp.

Chúc may mắn!


5

Sự khác biệt chính là divscác yếu tố khối và spanslà các yếu tố nội tuyến.

Cả hai có thể được tạo kiểu bằng CSS để hành động theo cách bạn muốn nhưng ngoài hộp bạn thường sử dụng spanscho các phân chia nội tuyến nhỏ hơn và divscho các khối lớn hơn.

Một số thứ sẽ ảnh hưởng đến các phần tử nội tuyến và khối khác nhau, ví dụ: bạn không thể đặt chiều cao lên một spanphần tử.


Bạn có ý nghĩa gì bởi khối và yếu tố nội tuyến?

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.