Phần tử Inline-level và Inline Boxes trong CSS

Các phần tử inline-level (cấp dòng) có thuộc tính CSS display được đặt là inline, inline-table, hoặc inline-block. Các phần tử này KHÔNG ép buộc ngắt dòng trước và sau chính chúng. Mỗi phần tử inline-level tạo ra một inline-level box, là một phần của sơ đồ định vị và chứa các hộp con.

Inline boxes là các hộp có nội dung tuân theo inline formatting context. Inline boxes có thể bị chia tách thành nhiều inline boxes, trong khi những inline boxes không bao giờ bị chia tách được gọi là atomic inline-level boxes.

Anonymous inline boxes (hộp dòng ẩn danh) là những hộp mà nhà phát triển không có quyền kiểm soát. Nếu một block box chứa một số văn bản trần (bare text) và các inline-level boxes khác, thì văn bản trần xung quanh các inline-level boxes tuân theo inline formatting context và được bao quanh bởi anonymous inline boxes.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; }
  input[type="button"] { border-radius: 10px; }
  .child { color: white; border: 4px solid black; }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS Inline-level Elements and Inline Boxes</legend>
      <div>
        <span class="child">Orange</span> Color
        <span class="child">Red</span> Color
        <span class="child">Violet</span> Color
      </div><br>
    </fieldset>
  </form>
</body>
</html>

Kết quả

Đặc điểm chính của Inline-level elements:

• Không bắt đầu trên dòng mới
• Chỉ chiếm chiều rộng cần thiết cho nội dung
• Không thể thiết lập width, height (trừ inline-block)
• margin-top/bottom và padding-top/bottom không ảnh hưởng layout
• Có thể chứa chỉ dữ liệu và các inline elements khác
• Phần tử mặc định inline: span, a, strong, em, img, input, button, label

Atomic inline-level boxes: img, input, select, textarea, object - các replaced elements không bị chia tách khi ngắt dòng.