Mô hình khối HTML

9.1 Phần tử khối

Mô hình khối HTML — là một khái niệm mô tả cấu trúc và cách hiển thị của các phần tử HTML trong tài liệu. Nó giúp các lập trình viên hiểu cách các phần tử tương tác với nhau và cách chúng đặt trên trang. Hiểu rõ mô hình khối rất quan trọng để tạo ra các trang web có cấu trúc và thu hút.

Mô hình khối HTML bao gồm hai loại phần tử chính: khối và dòng. Những phần tử này đóng vai trò quan trọng trong việc định dạng trang web.

Phần tử khối

Ví dụ về phần tử khối:

    
      <div>
        <h1>Tiêu đề</h1>
        <p>Đây là đoạn văn bản bên trong phần tử khối div.</p>
      </div>
    
  

9.2 Phần tử dòng

Phần tử dòng (inline-level elements) chỉ chiếm độ rộng cần thiết cho nội dung của chúng và không bắt đầu từ dòng mới. Chúng có thể chứa chỉ các phần tử dòng hoặc văn bản. Ví dụ về phần tử dòng:

Ví dụ về phần tử dòng:

    
      <span>Đây là đoạn văn bản với <strong>chữ đậm</strong> và <em>chữ nghiêng</em>.</span>
    
  

9.3 Các thành phần của mô hình khối

Mỗi phần tử trong mô hình khối có thể được đại diện dưới dạng một khối hình chữ nhật, bao gồm các phần sau:

• Nội dung (Content): nội dung bên trong của phần tử, ví dụ như văn bản hoặc hình ảnh
• Khoảng đệm (Padding): khoảng trống giữa nội dung và đường viền của phần tử
• Đường viền (Border): đường kẻ bao quanh khoảng đệm và nội dung
• Khoảng cách ngoài (Margin): không gian giữa đường viền của phần tử và các phần tử liền kề

Minh họa mô hình khối:

    
      .element {
        width: 200px;           /* Chiều rộng nội dung */
        padding: 10px;          /* Khoảng đệm */
        border: 2px solid red;  /* Đường viền */
        margin: 20px;           /* Khoảng cách ngoài */
      }
    
  

Ví dụ HTML với mô hình khối:

Trong ví dụ này, phần tử <div> với class "box" có chiều rộng 200px, khoảng đệm 10px, đường viền 2px và khoảng cách ngoài 20px. Những thuộc tính này xác định cách phần tử hiển thị trên trang và tương tác với các phần tử khác.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        Đây là ví dụ về mô hình khối.
      </div>