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
Display: inline-block
Khi set thuộc tính này các phần tử HTML sẽ nằm cùng dòng như inline nhưng có thể set width/height, kết hợp của cả 2 inline và block lun đấy nhé
Mặc định các tag HTML về form như input, button, select, textarea sẽ có default là display: inline-block
Screen Shot 2025-07-26 at 15.55.51
Tóm lại:
Xem hình cho dễ hiểu nhất nhé
