Lesson 9 - Box Model

Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.

Mô hình hộp trên chỉ là một mô hình lý thuyết lý tưởng. Bên dưới đây chúng ta sẽ xét mô hình hộp của một đối tượng web cụ thể:



Ví dụ: Chúng ta có một đoạn HTML sau:


Phần CSS cho đoạn HTML trên:


Với ví dụ trên chúng ta sẽ khái quát được mô hình hộp như sau:



Thuộc tính margin:

Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Page Setup của Word cũng có một thiết lập margin để định lề cho trang in. Tương tự, thuộc tính margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.

Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.


Hoặc gọn hơn chúng ta sẽ viết như sau:



Cú pháp như sau: :
margin: margin-top - margin-right - margin-bottom - margin-left



Thuộc tính padding:

Padding có thể hiểu như là một thuộc tính đệm.

Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về boxmodel).

Cú pháp:

Padding: padding-top / padding-right / padding-bottom / padding-left