Chúng ta biết phần tử Html và Css là hai người bạn không thể thiếu của Html. Phần tử tạo nên cấu trúc Html. Phần tử thì có hai dạng tính cách, phần tử Block, giỏi nhưng cao ngạo, phải chiếm trọn chiều ngang 1 dòng mới được. Còn thằng Inline hiền mà lại không giỏi.
Nếu Html chỉ dùng thằng Inline không lại không ổn. Vì nó không thể quy phục mấy phần tử khác vào 1 nơi. Còn nếu dùng thắng Block thì mỗi thằng lại đồi làm vua một cỗi sao chịu nổi.
Trong lúc rối trí HTLM mới hỏi cô bạn thân còn lại là Css. Và Css bảo Html đừng lo.

1. Thuộc tính Display dẹp loạn sứ quân
Thuộc tính Display trong Css như một thượng phương bảo kiếm. Bất kể phần tử bản chất góc là Block hay Inline. Gặp Display phải cuối đầu tuân lệnh.
- Display chỉ vào bất cứ phần tử Block và nói : “You là Inline ” thì nó inline
<li style=”display:inline”> abc </li>
- Display chỉ vào bất cứ phần tử Inline và nói : “You là Block” thì nó sẽ là Block.
<a style=”display:block”> abc</a>
- Phần tử nào chóng hơi thì sẽ cho bay màu (biến mất) ngay lập tức
<div style=”display:none”> abc </div>
2. Giải thích ý nghĩa và điều chú ý về thuộc tính Display
Display: là thuộc tính của Css
Inline, block, none là 3 trong số các giá trị của thuộc tính display
- Display:inlne : chuyển phần tử về dạng Inline
- Display:block: Chuyển phần tử về dạng block
- Display:none: Ẩn phần tử
Nếu như theo bài chia sẽ thuộc tính trong Html thì display cũng là thược tính nên viết như sau
<p display=”inline”> abc </p>
( Đúng theo cấu trúc viết thuộc tính trong HTML là : Tên thuộc tính=”giá trị thuộc tính” )
Nhưng đây là cách viết sai: Lý do cách viết đó chỉ dùng cho các thuộc tính do HTML trực tiếp quản lý, như href, src, alt
Nhưng Display là thuộc tính dưới trướng Css không phải là thuộc tính do Html trực tiếp quản lý. Nên Html muốn sử dụng display nói riêng hay các thuộc tính khác thuộc Css nói chung thì phải hỏi ý kiến Css. Nghĩa là phải thông qua các thuộc tính toàn cầu là Style, Class, hay Id, thì Html mới dùng được thuộc tính của Css.
Nên cách viết đúng là:
<p style=”display:inline”> abc </p>
Danh sách cá thuộc tính thuộc sự quản lý trực tiếp của Html:
https://www.w3schools.com/tags/ref_attributes.asp
Hi vọng bài viết hữu ích với bạn!