Khi nào nên sử dụng Display: Block; Inline; Inline-Block là câu hỏi được tìm kiếm nhiều nhất. Vậy Sự khác nhau giữa Display: Block; Inline; Inline-Block như thế nào? Hôm nay, ATPWebs sẽ giúp bạn tìm hiểu Sự khác nhau giữa Display: Block; Inline; Inline-Block 2022.
1. Giá trị display: inline;
Inline là cách hiển thị trên một hàng và chiều rộng của thẻ đó sẽ dựa vào nội dung bên trong của thẻ, vì vậy nhiều thẻ có khả năng nằm ở trên cùng một hàng. tuy vậy inline không thể sử dụng được các thuộc tính width, height và top-bottom margin. Các thẻ HTML được hiển thị mặc định inline là
span.a { display: inline; /* mặc định với span, a, strong, b, i... */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } <head> <style> span.a { display: inline; /* mặc định với span, a, strong, b, i... */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } </style> </head> <body> <h1>Thuộc tính Display</h1> <h2>display: inline</h2> <div>Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email<span class="a">info@meta.vn</span> <span class="a">info@meta.com.vn</span> hoặc đăng ký tài khoản và đăng bài trực tiếp trên atpweb.vn.</div> </body> </html> 
2. Giá trị display: block;
Block là cách hiển thị luôn khởi đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng Web. Bởi vậy khi mà bạn vận dụng thẻ này thì mặc dù thông tin ngắn tuy nhiên các thẻ khác ở phía dưới vẫn được nằm ở một dòng khác tách biệt. Khác biệt của thẻ này là dùng được tính chất width và height. Các thẻ HTML hiển thị mặc đinh block là:
span.b { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } <head> <style> span.a { display: inline; /* mặc định với span, a, strong, b, i... */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } </style> </head> <body> <h1>Thuộc tính Display</h1> <h2>display: inline</h2> <div>Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email<span class="a">info@meta.vn</span> <span class="a">info@meta.com.vn</span> hoặc đăng ký tài khoản và đăng bài trực tiếp trên atpweb.vn.</div> </body> </html> 
3. Giá trị display: inline-block;
Inline-block là cách hiển thị kết hợp cả hai cách trên, chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block.
span.c { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } <!DOCTYPE html> <html> <head> <style> span.c { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; } </style> </head> <body> <h1>Thuộc tính Display</h1> <h2>display: inline-block</h2> <div>Cập nhật những xu hướng,<span class="c">khám phá,</span> <span class="c">nghiên cứu</span> mới nhất về khoa học công nghệ.</div> </body> </html> - So với display: inline, cách hiển thị inline-block có khả năng dùng được các thuộc tính width, height và top-bottom margin.
- So với display: block, cách hiển thị inline-block không làm ngắt dòng một khi kết thúc thẻ, vì vậy các thẻ có thế được đặt nằm cạnh nhau.
Sử dụng inline-block để tạo liên kết điều hướng
Display: inline-block được vận dụng chủ yếu cho việc hiển thị danh sách điều hướng theo chiều ngang:
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } </style> </head> <body> <h1>Website Atpweb</h1> <p>Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài trực tiếp trên atpweb.vn.</p> <ul class="nav"> <li><a href="#langcongnghe">Làng công nghệ</a></li> <li><a href="#congnghe">Công nghệ</a></li> <li><a href="#khoahoc">Khoa học</a></li> <li><a href="#cuocsong">Cuộc sống</a></li> </ul> </body> </html> 
(Nguồn: Tổng hợp)
Tổng kết
Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.
ATPWEB – XÂY DỰNG NGÔI NHÀ ONLINE
- Hotline: 0707 6666 56
- Fanpage: ATPWEB
- Gmail: info@atpweb.vn
- Website: https://atpweb.vn
![[Hướng dẫn] Tạo Website Cá Nhân MIỄN PHÍ, Không Cần Code](https://atpweb.vn/wp-content/uploads/2023/06/Frame-4-1024x537.png)
![[Hướng dẫn] Tạo Sitemap Cho Website Chuẩn Nhất](https://atpweb.vn/wp-content/uploads/2022/07/Frame-17.png)
