CSS Span: Phần tử inline đa năng

<span> là phần tử HTML generic tương tự <div>, nhưng có khác biệt cơ bản:

• <div>: Block element — chiếm toàn bộ chiều ngang, dùng cho layout.
• <span>: Inline element — chỉ chiếm diện tích cần thiết, dùng để nhấn mạnh (emphasize) nội dung nhỏ.

So sánh trực quan

.div-style { background: purple; color: blanchedalmond; padding: 20px; margin: 10px; }
.span-style { background: orange; color: black; }

<div class="div-style"> hiển thị block, tách dòng. <span class="span-style"> hiển thị inline, liền nhau.

Lưu ý: Không thể thiết lập width/height cho <span> trừ khi thêm display: inline-block (hoặc block, flex, grid).

Kết hợp Div và Span

Div tạo khung layout, span định dạng inline bên trong:

<div class="div-style">
  <span class="span-style">Span trong div</span>
  <p>... khác style ...</p>
  <span class="span-style">
    ... inline-element không thể set height/width trừ khi
    <span class="highlight">display: inline-block</span>
  </span>
</div>

Ví dụ layout phức tạp: div container chính, div header, div sidebar/main, span cho text nhấn mạnh trong sidebar/footer.

Kết luận

<span> và <div> là khối xây dựng cơ bản. Span cho phép định dạng inline tách biệt, tạo điểm nhấn (emphasis) trong khối block.