Bài 28: Cách sử dụng Inline-block trong css

Cách sử dụng Inline-block trong css

Inline-block là một thuộc tính trong CSS được sử dụng để định dạng hiển thị của phần tử. Khi sử dụng inline-block, phần tử sẽ được hiển thị như một khối (block element) nhưng vẫn giữ lại tính chất inline, nghĩa là nó sẽ được hiển thị trong cùng một hàng với các phần tử khác.

Để sử dụng inline-block, bạn chỉ cần thêm thuộc tính display với giá trị là "inline-block" vào phần tử:

div {
  display: inline-block;
}

Với thuộc tính này, phần tử sẽ có thể có kích thước, padding và margin tùy ý và được hiển thị trên cùng một hàng với các phần tử khác. Nó thường được sử dụng để tạo các thành phần như nút, hộp chọn và các thành phần trình bày khác.

Dưới đây là một ví dụ về cách sử dụng thuộc tính inline-block để tạo một danh sách các nút trên cùng một hàng:Dưới đây là một ví dụ về cách sử dụng thuộc tính inline-block để tạo một danh sách các nút trên cùng một hàng:

HTML

<div class="button-container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

CSS

.button-container button {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #ddd;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

Trong ví dụ này, tất cả các nút được định dạng hiển thị như một khối (block element) và được đặt trên cùng một hàng với nhau. Các nút có padding, border-radius và font-size tùy ý để tạo ra một giao diện người dùng hấp dẫn hơn. Thuộc tính margin-right được sử dụng để tạo khoảng trống giữa các nút.

Lưu ý rằng, nếu phần tử sử dụng thuộc tính inline-block và có một số khoảng trắng hoặc dòng mới trong mã HTML, các khoảng trắng và dòng mới đó sẽ được hiển thị ra trên trình duyệt. Để khắc phục vấn đề này, bạn có thể sử dụng các kỹ thuật khác như: sử dụng một dòng mã HTML duy nhất (không có khoảng trắng hoặc dòng mới), hoặc đặt thuộc tính font-size của phần tử cha bằng 0 và đặt font-size của phần tử con bằng giá trị mong muốn.