Wiki

Các Thuộc tính Display (inline-block) trong CSS

Công ty display inline-block là gì Đơn vị

Có thể nhận thấy rằng, một số thẻ HTML như <div>, <p>, <ul> luôn bắt đầu bằng một dòng mới và có độ dài dòng trải dài 100% trang web, trong khi các thẻ HTML khác như <span>, <img> hoặc <a> thì thường được đặt nối tiếp nhau trên cùng một dòng. Tại sao lại có sự khác biệt như vậy? Hãy đi tìm câu trả lời qua bài học về giá trị của thuộc tính display ngay sau đây.

Trả lời một cách đơn giản, sự khác biệt này là do giá trị hiển thị khác nhau: Block và Inline.

Bạn đang xem: display inline-block là gì

Các giá trị của thuộc tính Display

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ẽ phụ thuộc vào nội dung bên trong của thẻ, vì vậy nhiều thẻ có thể nằm trên cùng một hàng. Tuy nhiên 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>, <strong>, <b>, <i>…

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; }

Top 1 thiên niên kỷ bằng bao nhiêu năm

<!DOCTYPE html><html><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 wiki.noithatvietphat.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”>[email protected]</span> <span class=”a”>[email protected]</span> hoặc đăng ký tài khoản và đăng bài trực tiếp trên wiki.noithatvietphat.vn.</div></body></html>

XEM THÊM:  Những học phí đại học nam cần thơ 2019-2020

Ở ví dụ này, thuộc tính width và height không sử dụng được, các thẻ span nằm cùng một dòng cạnh nhau, một số thuộc tính áp dụng gây ảnh hưởng đến nội dung ở các dòng khác.

Giá trị display: block

Block là cách hiển thị luôn bắt đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng trang web. Vì vậy khi bạn dùng thẻ này thì mặc dù nội dung ngắn nhưng 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 thuộc tính width và height. Các thẻ HTML hiển thị mặc đinh block là: <div>, <p>, <h1> đến <h6>, <header>, <footer>, <section>, <nav>…

Xem thêm: List mạng xã hội tiếng anh là gì

span.b { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #DB7093; }

Giá trị display: block

<!DOCTYPE html><html><head><style>span.b { display: 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: block</h2><div>Bạn có thể trở thành một phần của wiki.noithatvietphat.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=”b”>[email protected]</span> <span class=”b”>[email protected]</span> hoặc đăng ký tài khoản và đăng bài trực tiếp trên wiki.noithatvietphat.vn.</div></body></html>

Ở ví dụ này, thuộc tính width và height sử dụng được, nhưng vì cố định kích thước nên nội dung dài hơn sẽ bị tràn ra ngoài.

XEM THÊM:  Các cấu trúc nhờ vả

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; }

Giá trị display: inline-block

<!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ó thể sử dụng được các thuộc tính width, height và top-bottom margin.

Có thể bạn quan tâm: List mặt phẳng trung trực là gì

So với display: block, cách hiển thị inline-block không làm ngắt dòng sau khi kết thúc thẻ, do đó 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 sử 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;}

Sử dụng inline-block để tạo liên kết điều hướng

<!DOCTYPE html><html><head><style>.nav { background-color: #DB7093;; list-style-type: none; text-align: center; margin: 0; padding: 0;}.nav li { display: inline-block; font-size: 20px; padding: 20px;}</style></head><body><h1>Website Quản trị mạng</h1><p>Bạn có thể trở thành một phần của wiki.noithatvietphat.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 [email protected] hoặc đăng ký tài khoản và đăng bài trực tiếp trên wiki.noithatvietphat.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>

XEM THÊM:  Các ngân hàng sacombank viết tắt là gì

Theo mặc định, các mục danh sách được hiển thị theo chiều dọc. Ở ví dụ này, ta sử dụng display: inline-block để hiển thị chúng theo chiều ngang (cạnh nhau).

Lưu ý: Nếu bạn thay đổi kích thước cửa sổ trình duyệt, các liên kết sẽ tự động ngắt xuống dòng khi nội dung dài quá chiều rộng web.

Bài trước: Thuộc tính FLOAT và CLEAR trong CSS

Bài tiếp: Căn chỉnh – Align trong CSS

Tham khảo: Những Tin tức

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button