Giới thiệu về mô hình khối (Box Model)

1.1 Cơ bản về mô hình khối (Box Model)

Mô hình khối (Box Model) là nền tảng để hiểu cách các phần tử được sắp xếp và tương tác với nhau trên trang web. Nó xác định cấu trúc và kích thước của các phần tử HTML, cũng như cách chúng được bao quanh bởi các khoảng cách, đường viền và khoảng cách bên ngoài.

Cơ bản về mô hình khối (Box Model)

Mô hình khối CSS mô tả thành phần của các phần tử khối trong HTML. Mỗi phần tử bao gồm bốn thành phần cơ bản:

• Nội dung (content).
• Khoảng cách bên trong (padding).
• Đường viền (border).
• Khoảng cách bên ngoài (margin).

Các thành phần này xác định cách phần tử sẽ hiển thị và cách nó sẽ tương tác với các phần tử khác trên trang.

Nội dung (Content)

Nội dung (content) là phần chính của phần tử, nơi chứa văn bản, hình ảnh hoặc các phần tử lồng ghép khác. Kích thước của nội dung có thể được đặt rõ ràng thông qua các thuộc tính width và height, hoặc được xác định bởi chính nội dung của phần tử.

Ví dụ sử dụng

Trong ví dụ này, nội dung của phần tử .content bao gồm văn bản "Đây là nội dung của phần tử.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Đây là nội dung của phần tử.
      </div>
    
  

1.2 Hình dung mô hình khối

Mỗi phần tử trong mô hình khối có thể được thể hiệ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 cách bên trong (Padding): không gian giữa nội dung và đường viền của phần tử
• Đường viền (Border): đường bao quanh khoảng cách bên trong và nội dung
• Khoảng cách bên ngoài (Margin): không gian giữa đường viền của phần tử và các phần tử lân cận

Hình dung mô hình khối:

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

1.3 Đường viền (Border)

Đường viền (border) bao quanh nội dung và khoảng cách bên trong của phần tử. Đường viền có thể có các kiểu, độ dày và màu sắc khác nhau. Đường viền có thể được sử dụng để làm nổi bật các phần tử trên trang.

Ví dụ sử dụng

Trong ví dụ này, một đường viền dày 5 pixel, gạch đứt và màu đen được áp dụng vào phần tử .border, bao quanh nội dung và khoảng cách bên trong.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Đây là phần tử với đường viền.
      </div>