CSS - Inline Block: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng nhau khám phá thế giới kỳ diệu của CSS inline-block. Với tư cách là giáo viên máy tính hàng xóm thân thiện, tôi sẽ dẫn dắt các bạn qua khái niệm này từng bước một, với rất nhiều ví dụ để làm rõ ràng hơn. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi舒适的, và cùng nhau bắt đầu hành trình thú vị này nhé!

CSS - Inline Block

Inline-Block là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu rõ inline-block là gì. Hãy tưởng tượng bạn đang sắp xếp sách trên kệ. Một số sách bạn muốn đứng thẳng (như các yếu tố inline), và một số bạn muốn nằm Horizontal (như các yếu tố block). Nhưng nếu bạn muốn một cuốn sách đứng thẳng và chiếm một khoảng không cụ thể? Đó chính là lúc inline-block phát huy tác dụng!

Thuộc tính display: inline-block của CSS kết hợp các tính năng của cả inline và block elements. Nó cho phép các yếu tố ngồi cạnh nhau như các yếu tố inline, nhưng cũng tuân theo các thuộc tính width và height như các yếu tố block.

Hãy cùng nhìn vào một ví dụ đơn giản:

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Trong ví dụ này, chúng ta đã tạo ra ba yếu tố div với lớp inline-block-element. Chúng sẽ xuất hiện bên cạnh nhau (inline), nhưng chúng ta cũng có thể thiết lập width và height (block).

CSS Inline Block - Hành vi khác nhau tùy thuộc vào nội dung

Một trong những điều tuyệt vời về inline-block là nó hành xử khác nhau tùy thuộc vào nội dung. Hãy cùng khám phá điều này với một ví dụ:

<style>
.container {
font-size: 0; /* Điều này loại bỏ khoảng cách giữa các yếu tố inline-block */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* Đặt lại kích thước chữ cho nội dung */
vertical-align: top; /* Căn chỉnh các hộp lên trên */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

Trong ví dụ này, chúng ta đã tạo ra ba hộp với chiều cao khác nhau. 注意到它们都因为 vertical-align: top mà căn chỉnh lên trên. Thử thay đổi thuộc tính này để xem nó ảnh hưởng như thế nào đến căn chỉnh!

CSS Inline Block - Các liên kết điều hướng

Một ứng dụng phổ biến của inline-block là tạo menu điều hướng. Hãy cùng tạo một thanh điều hướng đơn giản:

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Trang chủ</a>
<a href="#">Về chúng tôi</a>
<a href="#">Dịch vụ</a>
<a href="#">Liên hệ</a>
</nav>

Điều này tạo ra một thanh điều hướng mượt mà với các liên kết có thể nhấp. Thuộc tính inline-block cho phép chúng ta đặt padding và margin trên các yếu tố này, điều mà không thể thực hiện được chỉ với inline.

CSS Inline Block - Nhóm nút

Inline-block rất phù hợp để tạo nhóm nút. Dưới đây là cách bạn có thể làm điều đó:

<style>
.btn-group {
font-size: 0; /* Loại bỏ khoảng cách giữa các nút */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Trái</button>
<button class="btn">Giữa</button>
<button class="btn">Phải</button>
</div>

Điều này tạo ra một nhóm nút nơi các nút được nối liền mạch.

CSS Inline Block - Hình ảnh và Văn bản

Inline-block rất tốt cho việc căn chỉnh hình ảnh với văn bản. Hãy cùng xem cách thực hiện:

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* Điều chỉnh dựa trên chiều rộng của hình ảnh */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Placeholder">
<p>Đây là một đoạn văn bản xuất hiện bên cạnh hình ảnh. Thuộc tính inline-block cho phép chúng ta căn chỉnh hình ảnh và văn bản theo chiều dọc.</p>
</div>

Điều này tạo ra một bố cục đẹp với một hình ảnh căn chỉnh với văn bản bên cạnh.

CSS Inline Block - Thanh tiến trình

Cuối cùng, hãy tạo một số thanh tiến trình sử dụng inline-block:

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

Điều này tạo ra các thanh tiến trình đơn giản với các chỉ số phần trăm.

Kết luận

Và đây là tất cả những gì bạn cần biết về thuộc tính inline-block linh hoạt và các ứng dụng khác nhau của nó. Từ menu điều hướng đến thanh tiến trình, thuộc tính này cung cấp một cách linh hoạt để bố trí các yếu tố trên trang web của bạn.

Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy, đừng ngần ngại thử nghiệm với các ví dụ này và tạo ra những thiết kế độc đáo của riêng bạn. Chúc các bạn may mắn!

Phương pháp	Mô tả
`display: inline-block`	Kết hợp các tính năng của inline và block elements
`vertical-align`	Căn chỉnh các yếu tố inline-block theo chiều dọc
`width` và `height`	Có thể áp dụng cho các yếu tố inline-block
`margin` và `padding`	Có thể áp dụng theo mọi hướng
Mẹo kích thước chữ	Đặt `font-size: 0` trên cha sẽ loại bỏ khoảng cách giữa các con inline-block

Credits: Image by storyset