Block-level element và Inline element khác nhau như thế nào trong HTML?

Khác nhau ở cách element tham gia vào dòng: block chiếm một dòng riêng, inline nằm cùng dòng với văn bản xung quanh.

• Block (<div>, <p>, <h1>): chiếm hết chiều rộng còn trống, luôn bắt đầu dòng mới, đặt được width/height.
• Inline (<span>, <a>, <strong>): rộng đúng bằng nội dung, không bắt đầu dòng mới, width/height không có tác dụng.

display: inline-block cho phép element nằm cùng dòng mà vẫn nhận width/height.

Ngoại lệ: <img>, <video>, <iframe> mặc định là inline nhưng vẫn nhận width/height, vì chúng là replaced element — nội dung có kích thước gốc riêng. Spec ghi width áp cho "mọi element trừ non-replaced inline element".

Lưu ý: trên inline element, margin-top/margin-bottom không có tác dụng, còn trên block thì cả bốn chiều đều có. padding/border dọc vẫn được vẽ nhưng không đẩy các dòng xung quanh ra, nên nền và viền chồng lên dòng bên cạnh.

<p>Đoạn văn <span style="width:300px;margin-top:40px">span này không rộng 300px và cũng không dịch xuống</span></p>

HTML5 không còn phân loại element theo block/inline — đó là thuộc tính trình bày do CSS display quyết định, còn HTML dùng content category.

Vì vậy <a> được phép bọc cả một khối <div>.