10. Box Model Trong CSS

Box Model trong CSS: Mô hình hộp (Box Model) là một khái niệm quan trọng trong CSS mô tả cách mà các phần tử HTML được cấu thành và chiếm dụng không gian trong trình duyệt. Mô hình hộp bao gồm các phần: nội dung (content), padding, border và margin. Khi bạn hiểu cách mô hình hộp hoạt động, bạn có thể kiểm soát cách các phần tử được trình bày và cách chúng tương tác với nhau.

Dưới đây là mô tả về các phần của mô hình hộp:

Nội dung (Content): Là phần thực sự chứa nội dung của phần tử, ví dụ như văn bản, hình ảnh, video, vv. Kích thước của nội dung được xác định bằng các thuộc tính width và height.
Padding: Là không gian nằm giữa nội dung và viền. Thuộc tính padding xác định khoảng cách từ biên của phần tử đến nội dung bên trong. Nó giúp tạo khoảng trống bên trong phần tử, tạo ra độ tách biệt giữa nội dung và viền.
Border: Là viền xung quanh nội dung và padding. Viền có thể được định nghĩa bằng thuộc tính border, và nó tạo ra ranh giới rõ ràng giữa phần tử và các phần tử khác.
Margin: Là khoảng cách giữa viền của phần tử hiện tại và các phần tử xung quanh nó. Thuộc tính margin xác định khoảng cách từ viền của phần tử đến các phần tử khác.

Sự tương tác giữa các phần tử này ảnh hưởng đến diện tích thực tế mà phần tử chiếm trong trình duyệt. Khi bạn đặt kích thước của một phần tử bằng cách sử dụng width và height, bạn đang đặt kích thước của phần nội dung. Padding, border và margin cộng thêm vào kích thước này, điều này có thể làm tăng tổng kích thước của phần tử trên trang web.

Để tùy chỉnh và kiểm soát mô hình hộp, bạn có thể sử dụng các thuộc tính như width, height, padding, border, và margin để tạo ra bố cục và giao diện theo ý muốn.

Dưới đây là một ví dụ cụ thể về cách áp dụng mô hình hộp trong CSS để tạo ra một phần tử với padding, border và margin:

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>Box Model Example</title>
</head>
<body>
    <div class="box">
        Box with Content
    </div>
</body>
</html>

CSS (styles.css):

css

/* Reset default margin and padding for all elements */
body, h1, p {
    margin: 0;
    padding: 0;
}

.box {
    width: 200px;
    height: 150px;
    padding: 20px;
    border: 2px solid #333;
    margin: 30px;
}

Trong ví dụ này:

Một <div> có class box được tạo ra để chứa nội dung.
Đã đặt kích thước chiều rộng và chiều cao của phần tử thành 200px x 150px bằng thuộc tính width và height.
Đã thêm khoảng trống bên trong phần tử sử dụng thuộc tính padding để tạo ra một khoảng cách giữa nội dung và viền.
Đã định nghĩa viền bằng thuộc tính border để tạo ra một viền xung quanh phần tử.
Đã thêm khoảng trống bên ngoài phần tử sử dụng thuộc tính margin để tạo ra một khoảng cách giữa phần tử và các phần tử khác.

Với các thuộc tính này, phần tử .box sẽ có nội dung bên trong được bao bọc bởi padding, border và margin, tạo ra một mô hình hộp hoàn chỉnh.

Leave a Comment Cancel Reply