[CSS] - Master FrontEnd chưa chắc hiểu rõ - display - inline, block và inline-block

Trong dân gian, người xưa có câu:

“Đừng xấu hổ khi không biết, chỉ xấu hổ khi không học.”

Trong series học và tìm hiểu sâu về CSS này, chúng ta sẽ được hiểu rõ và hiểu thêm về các điều hay ho trong CSS mà chưa chắc Master FE hiểu rõ nhé. Có những thứ tưởng chừng đơn giản nhưng rất dễ gây nhầm lẫn nếu chưa hiểu sâu

Display: inline

Khi set thuộc tính này có 1 lưu ý quan trọng rằng chúng ta không thể set width hoặc height cho phần tử HTML và các phần tử sẽ nằm trên 1 hàng

Mặc định các tag HTML như span, a, img, label sẽ có default là display: inline

Ví dụ: mình muốn tạo 1 border cho đoạn text, và với display: inline, mặc dù mình có set width và height nhưng đã bị bỏ qua và không chấp nhận width/height, vậy nên hãy chú ý với thuộc tính này nhé

Display: block

Khi set thuộc tính này các phần từ HTML sẽ chiếm toàn bộ chiều ngang của dòng (block-level), và chúng ta có thể set width hoặc height như bình thường nhé

Mặc định các tag HTML như p, h1 -> h6, div, form và ul ol lisẽ có default là display: block

Screen Shot 2025-07-26 at 15.53.29