Phân biệt giữa inline và block elements

Khi bắt đầu học về các thẻ của HTML, bạn nên tìm hiểu xem thẻ đó thuộc loại inline element hay block element.
Điều này khá là quan trọng đấy (nhất là khi phỏng vấn người ta sẽ hỏi)
Xem bài viết : http://toiyeuweb.net/phan-biet-inline-va-block-elements-trong-html/
Block elements : <div>, <p> , <h1> – <h6> , <form> , <nav>, <header>, <footer>, <ul>, <ol>, <li>, <br>, <hr>, ….
Inline elements: <img>, <span> , <a>, <b>, <i>, <strong>, <mark> ….
Rồi! Để phân biệt 2 loại này thì mình sẽ giải thích đơn giản như sau:
Block elements : luôn được viết trên một dòng mới và có chiều rộng (width) của nó sẽ bằng chiều rộng của mẹ nó (mẹ nó là đứa chứa nó )
Ví dụ ta có < div> nằm trong <section> thì <div> sẽ có chiều rộng bằng <section>, nhớ để width=400px hoặc bao nhiêu tùy các bạn để dễ nhìn hơn nhé.
Bạn thấy div chứa background màu vàng đã bằng với chiều rộng section chưa nào? Chắc là rồi chứ nhỉ.
Inline elements : (thì hoàn toàn ngược lại) Nó không được viết trên một dòng mới , chiều rộng của nó chỉ bằng nội dung mà thẻ đó chứa thôi.
Ta ví dụ như sau : Cho một thẻ span nằm trong thẻ div nhé.
Bạn thấy đấy <span> không hề được viết xuống 1 dòng mới và chiều rộng không hề bằng thẻ div<mẹ chứa nó>
Lưu ý : Thẻ block có thể chứa thẻ inline nhưng thẻ inline không thể chứa thẻ block nhé, như vậy là sai quy tắc đấy.
Một lưu ý tiếp theo mà nhà tuyển dụng hay hỏi: Làm sao để biến thẻ inline elements thành thẻ block element được???
Đáp án: sử dụng CSS display: block, và ngược lại muốn thẻ block thành inline thì thêm display: inline !!!