Hỏi đáp

Inline Css Là Gì – Css Là Gì Cách Nhúng Mã Css Vào Html

Chúng ta sẽ cùng nhau tìm hiểu biết 3 kiểu hiển thị phần tử trong CSS đó là Block, Inline và Inline-block xem chúng với gì khác nhau nhé !

Trước lúc vào bài viết thì giả sử chúng ta với đoạn mã HTML như sau:

html> head> meta charset=”UTF-8″> meta name=”viewport” content=”width=device-width, initial-scale=một.0″> link rel=”stylesheet” href=”https://thienmaonline.vn/inline-css-la-gi//main.css”> head> body> p>Đoạn văn span class=”inline”>đầu tiênspan> trong trangp> p>Đoạn văn span class=”block”>thứ 2span> trong trangp> p>Đoạn văn span class=”inline-block”>thứ 3span> trong trangp> body>html>Ta sẽ thêm một chút CSS cho những class trên nhé:

span border: 2px doted red; .inline display: inline;.block display: block; width: 100px; height: 100px;.inline-block display: inline-block; width: 100px; height: 100px;lúc đó trên giao diện ta sẽ thấy mọi thứ hiển thị thế này:

một, InlinePhần tử với thuộc tính display thuộc kiểu Inline sẽ tọa lạc cùng dòng với những phần tử cạnh nó.Ta với thể coi phần tử Inline như là những từ thuộc một đoạn văn, lúc còn chỗ trống thì nó tọa lạc ngoại trừ phần tử trước nó, lúc hết chỗ trống thì nó “xuống dòng”Khoảng cách giữa phần tử Inline và những phần tử cạnh nó được để mặc định là khoảng cách giữa những từ của font-sizeTa ko thể định nghĩa những thuộc tính width, height, padding và margin theo chiều dọc (top, bottom) dành cho những phần tử Inline

Ta với thể thử thêm thuộc tính width và height vào đoạn CSS dành cho phần tử Inline:

.inline display: inline; width: 100px; height: 100px;Và hãy thử xem kết quả:

Mọi thứ vẫn giữ nguyên như vậy.

những bạn đang xem: Inline css là gì

2, BlockPhần tử với thuộc tính display thuộc kiểu Block sẽ tọa lạc trên một dòng riêng.Ta với thể coi phần tử Inline như là một đoạn văn riêng rẽ, tách biệt với những phần tọa lạc trên và dưới nóVới phần tử thuộc kiểu Block, ta hoàn toàn với thể định nghĩa width và height cho nó (Mặc định giá trị là 100% so với phần tử cha).

Nếu như ta comment đi phần thuộc tính width và height ở trong ví dụ trên:

.block display: block; /*width: 100px; height: 100px;*/Thì kết quả nhận được như sau:

*

Rõ ràng là width và height với ảnh hưởng tới thuộc tính Block.

Xem thêm: Sweet Potato Là Gì – Nghĩa Của Từ Sweet Potato Trong Tiếng Việt

3, Inline-block

Nếu như những bạn muốn hiển thị Element của mình theo kiểu Inline, nhưng lại muốn căn chỉnh được width, height, padding và margin theo chiều dọc thì đây là thứ những bạn cần.

Xem thêm: Capital Budgeting Là Gì – Học Cfa: Chủ đề Capital Budgeting

Inline-block là kiểu kết hợp giữa Inline và Block, nó vừa với thể hiển thị trên cùng dòng như Inline, lại với thể căn chỉnh được những giá trị như đã nêu ở trên tương đương Block.

Cũng tương đương ở phần Block, ta hãy thử comment đi thuộc tính width và height trong đoạn CSS của Inline-block xem:

.block display: inline-block; /*width: 100px; height: 100px;*/Lần này mình sẽ ko đăng hình kết quả để những bạn thử trải nghiệm xem thế nào nhé !

Thử tạo một navigation-bar với Inline-block

Với những đặc trưng của Inline-block, chúng ta hãy thử tạo một navigation-bar cùng với nó xem sao nhé. Ở đây mình sẽ chú trong vào đặc tính của Inline-block nên sẽ ko làm quá xinh đâu :v

body> h1>My Inline-block Navigation Barh1> ul class=”nav”> li>a href=”https://thienmaonline.vn/inline-css-la-gi//#home”>Homea>li> li>a href=”https://thienmaonline.vn/inline-css-la-gi//#about”>About Usa>li> li>a href=”https://thienmaonline.vn/inline-css-la-gi//#clients”>Our Clientsa>li> li>a href=”https://thienmaonline.vn/inline-css-la-gi//#contact”>Contact Usa>li> ul>body>.nav background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0;.nav li display: inline-block; font-size: 20px; padding: 20px;4, Tài liệu tham khảo

Chuyên mục: Hỏi Đáp


Nguồn : Sưu tầm

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