Sự khác nhau giữa block element và inline element là gì?

Question

Accepted Answer

Mỗi element có một hành vi **display** mặc định điều khiển cách nó trôi trong layout. - Các element **block** bắt đầu trên một **dòng mới** và chiếm **toàn bộ chiều rộng khả dụng**. Chúng chấp nhận width/height và mọi margin/padding. Ví dụ: `

`, `

`, `
`, `
`. - Các element inline trôi bên trong một dòng, chỉ rộng bằng nội dung của chúng, và bỏ qua width/height cũng như margin trên/dưới. Ví dụ: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Một cái bẫy thực tế ```css span { width: 200px; height: 50px; } /* ❌ bị bỏ qua — span là inline / ``` Đặt `width`/`height` cho một inline element không có tác dụng gì. Cách khắc phục là đổi display của nó: ```css span { display: inline-block; width: 200px; } / ✅ trôi inline NHƯNG tôn trọng kích thước / ``` ## inline-block — kết hợp tốt nhất của cả hai `inline-block` nằm trong dòng văn bản (cạnh nhau) và* tôn trọng width/height/margin — hoàn hảo cho các mục nav, badge, hoặc button xếp thành một hàng. ```text block → dòng mới, full width, đặt được kích thước inline → trong dòng, rộng theo nội dung, KHÔNG đặt được kích thước (chiều dọc) inline-block → trong dòng, trôi theo nội dung, đặt được kích thước ``` ## Tại sao điều này quan trọng Hiểu display mặc định giải thích tại sao `` của bạn không nhận height, tại sao các `
` xếp chồng, và khi nào cần chuyển sang `inline-block`, `flex` hay `grid`. Đó là nền tảng của cách các element sắp xếp trước khi bạn áp dụng bất kỳ hệ thống layout nào.