Box Model là một kỹ thuật cơ bản nhất trong CSS Layout và được sử dụng để bạn mô tả về khoảng cách mà mỗi phần tử trên website được sở hữu, hay nói cách khác là kỹ thuật tinh chỉnh khoảng cách hiển thị cho mỗi phần tử trên website.

Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng đó là:

• Margin: Khoảng cách tính từ bên ngoài của phần tử.
• Border: Đường viền của phần tử.
• Padding: Khoảng cách tính từ bên trong của phần tử.
• Content: Nội dung trong phần tử.

Hình ảnh dưới đây minh họa cho mô hình hộp (Box model):

Width và Height của một phần tử HTML

Để thiết lập chính xác width và height của một phần tử hiển thị đúng trên tất cả trình duyệt, trước hết bạn cần hiểu rõ về mô hình hộp (Box model).

Lưu ý: Khi bạn thiết lập thuộc tính width và height của các phần tử bằng CSS, bạn cần thiết lập width và height của phần nội dung. Để tính toàn kích thước đầy đủ của phần tử, bạn cần phải tính thêm cả padding, border và margin.

Dưới đây là công thức tính tổng Width (Height) của một phần tử HTML:

Tổng width = width + left margin + right margin + left border + right border + left padding + right padding;

Tổng height = height + top margin + bottom margin + top border + bottom border + top padding + bottom padding;

Ví dụ:

div {
    width:300px;
    height:300px;
    padding: 50px;
    border:10px solid black;
}

Phần Lề (Margin):

margin trong CSS hay nói cách khác Margin sẽ có tác dụng tạo khoảng cách từ Border trở ra ngoài, nói dễ hiểu thì nó sẽ giúp bạn tinh chỉnh khoảng cách giữa các phần tử với nhau. Để dễ hiểu hơn thì các bạn hãy xem ví dụ bên dưới.

Bạn thấy #box1 và #box2 có một khoảng trắng chứ? Đó là margin, bạn hãy xem ở tab CSS xem thì sẽ thấy ở #box2 mình có gắn thêm margin: 32px 0 0 0, tức là nó sẽ tạo ra một khoảng trắng ở trên đầu của #box2 và các mặt khác thì không tạo ra, cách viết tương tự như padding là 4 giá trị sẽ sắp xếp theo top right bottom left.

Tab HTML:

Tab CSS:

Và nó cũng có một số thuộc tính con là margin-top, margin-right, margin-bottom và margin-left.

Phần Viền (Border):

Vùng viền là phần diện tích bao quanh vùng đệm và được thiết lập thông qua các thuộc tính border trong CSS.

Thuộc tính border này bạn sẽ viết theo cấu trúc như sau:

Cú pháp: border: [size] [type] [color];

Ví dụ mình muốn tạo một cái viền, viền có kích thước 1px, kiểu trơn và màu viên là đỏ thì sẽ viết như sau:

border: 1px solid red;

Trong border có hỗ trợ một số type nhưsolid,dotted, double,groove,ridge, inset vàoutset.

Giống như các thẻ trong Box Model khác, border cũng có các thẻ con là border-top, border-right, border-bottom và border-left.

Phần Đệm (Padding):

Vùng đệm (hay khoảng đệm) của một box model là phần diện tích bao ngoài nội dung phần tử và được thiết lập thông qua các thuộc tính padding trong CSS.

Padding nghĩa là chúng ta sẽ thiết lập khoảng cách được tính từ phần Content trở ra viền của phần tử, đơn giản vậy thôi. Padding được khai báo trong CSS bởi thuộc tính padding với giá trị theo tuần tự top right bottom left (trên > phải > dưới > trái) và giá trị là số kèm theo đơn vị đo lường.

Ví dụ ở dưới mình có một cái thẻ