Block và Inline trong HTML

Mỗi phần tử HTML được phụ thuộc vào giá trị mặt định của kiểu phần tử, giá trị hiển thị mặc định là có hai loại là: phần tử khối hoặc phần tử nội tuyến

Phần tử khối (Block Element) là gì?

Một phần tử dạng khối luôn bắt đầu trên một dòng mới và có chiều rộng đầy màn hình(trái sang phải).

Ví dụ:

Một số phần tử HTML dạng khối:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

Phần tử nội tuyến (Inline Element) là gì?

Phần tử dạng nội tuyến không bắt đầu một  dòng mới và độ rộng phụ thuộc vào nội dung.

Ví dụ:

Một số thẻ HTML dạng nội tuyến:

<a><abbr> <acronym><b> <bdo><big><br> <button> <cite> <code><dfn><em><i><img><input><kbd><label><map><object><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Một số thẻ sử dụng phổ biến

Thẻ <div>

Thẻ <div> là một phần tử khối và có thể dùng để chứa các phần tử khác, thường xuyên sử dụng để định nghĩa các khối nội dung, được sử dụng để dàn trang(layout)

Ví dụ:

Thẻ <span>

Thẻ <span> là một phần tử nội tuyến, nó thường được dùng để chứa văn bản và định dạng cho văn bản, và được sử dụng để hiện thị các class icon trong các framework CSS.

Ví dụ

Học HTML