24. Inline-block Trong CSS

Inline-block trong CSS: inline-block là một giá trị của thuộc tính display trong CSS, được sử dụng để định dạng phần tử như một hộp có kích thước nhất định nhưng vẫn chia sẻ hàng ngang với các phần tử khác trên cùng một dòng. Điều này cho phép phần tử tự nhiên xuất hiện cạnh nhau, cũng như áp dụng các thuộc tính liên quan đến kích thước và khoảng cách như width, height, margin, padding,…

Ví dụ về cách sử dụng inline-block:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Inline-Block Example</title>
</head>
<body>
  <div class="container">
    <div class="inline-block-box">Box 1</div>
    <div class="inline-block-box">Box 2</div>
    <div class="inline-block-box">Box 3</div>
  </div>
</body>
</html>

CSS (styles.css):

css

.container {
  text-align: center; /* Canh giữa các phần tử con */
}

.inline-block-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

Trong ví dụ này, chúng ta có một phần tử .container chứa ba phần tử .inline-block-box. Các phần tử .inline-block-box được thiết lập display: inline-block, cho phép chúng nằm cùng một dòng ngang nhưng vẫn có kích thước và đặc tính của các hộp.

Lưu ý rằng inline-block cũng có một số vấn đề liên quan đến khoảng trắng trong mã HTML (do cách định dạng inline), nhưng chúng có thể được khắc phục bằng cách thêm một vài kỹ thuật, như sử dụng comment HTML để loại bỏ khoảng trắng không mong muốn.

Tuy nhiên, trong nhiều trường hợp, Flexbox và Grid Layout có thể là những lựa chọn tốt hơn để xây dựng cấu trúc layout linh hoạt hơn và dễ quản lý hơn.

Leave a Comment Cancel Reply