Phần tử block và inline

Định nghĩa

Trong văn bản HTML, các phần tử thuần túy được chia ra làm hai cấp độ theo cách thức mà trình duyệt render để hiển thị cho người dùng đó là block (hiển thị theo khối) và inline (hiển thị theo chiều ngang). Mặc dù hiện nay CSS có thể thay đổi cách hỉnh thị của chúng (từ block sang inline và ngược lại) nhưng bạn vẫn cần phải biết giá trị mặc định của phẩn tử đó là block hay inline để trình bày cho đúng chuẩn. Nguyên tắc chung phần tử inline thường không được chứa phần tử block.

Phần tử cấp độ block

Phần tử cấp độ block là phần tử hiển thị dạng khối, các phần tử được sắp xếp theo chiều đứng của phần tử cha. Khi gặp phần tử cấp độ block thì trình duyệt luôn tạo ra một dòng mới, rồi đến không gian dành cho phần nội dung của phần tử này và kết thúc bằng một dòng mới.

Mặc định của các phần tử dạng này có chiều rộng chiếm hết không gian chiều rộng của phần tử cha, chiều cao được mở rộng theo nội dung của nó. 

dưới đây là các phần tử có cấp đọ hiển thị block:

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

Phần tử cấp độ inline

Phần tử inline là phần tử  được sắp xếp theo chiều ngang và có độ rộng theo độ rộng của phần nội dung của nó, sử dụng phần tử inline sẽ không tạo ra dòng mới phía trước và sau phần tử.

Dưới đây là các phần tử inline:

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

Quy tắc:

Phần tử inline không được chứa phần tử block, nó chỉ được chứa phần nội dung và các phần tử inline khác. Phần tử block, ngoài chứa phần nội dung còn được chứa các phần tử block khác và các phần tử inline. 

Một vài trường hợp ngoại lệ:

• Thẻ <a> là phần tử inline nhưng có thể chứa phần tử block khác.
• Thẻ <p> là phần tử block nhưng khôn được chứa phần tử block khác.