Mô hình hộp CSS là gì?
Mô hình hộp CSS (CSS box model) chỉ áp dụng cho phần tử mức khối (block – level elements) có height
và width, là tập hợp các đặc tính cái định nghĩa lượng không gian quanh một phần tử: kích cỡ, không
gian padding, đường biên (border), không gian margin của nó.
CSS box model bao gồm các thành phần sau:
+ Bản thân nội dung (content) của phần tử.
+ Không gian padding cái kéo dài từ nội dung phần tử đến đường biên.
+ Đường biên mô phỏng bao quanh không gian padding.
+ Không gian margin cái bao gồm không gian giữa đường biên của hộp với cửa sổ trình duyệt hay với các
phần tử xung quanh trong tài liệu.
(Xem ảnh minh họa)
Sau đây ta sẽ xem xét từng thành phần cụ thể của CSS box model
Height và Width
Chú ý lại một lần nữa CSS box model chỉ áp dụng cho phần tử mức khối có height và width. Height
và width của một phần tử được tính đi đến đường biên mô phỏng của hộp.
Không gian padding
Không gian padding cái kéo dài từ nội dung phần tử đến đường biên của hộp.
Để thiết lập độ rộng của không gian padding, sử dụng đặc tính padding sau:
Padding:size;
nơi size được thể hiện bằng một trong những đơn vị độ dài CSS hay từ khóa
auto để trình duyệt tự động chọn padding.
Ví dụ, quy tắc style sau thiết lập không gian padding quanh đoạn văn thành 20 pixels:
p{padding:20px;}
Không gian padding cũng có thể được định nghĩa cho mỗi trong bốn cạnh của hộp ảo
bằng cách viết đặc tính padding như sau:
padding:top right bottom left;
nơi top là kích thước không gian padding lề đỉnh của nội dung, right là padding lề phải,
bottom là kích thước của padding đáy, và left là kích thước của padding lề trái.Vì vậy, quy tắc
style sau tạo một không gian padding cái là 10 pixels trên đỉnh, 0 pixel về phía phải, 15 pixels
trên đáy và 5 pixels về phía trái:
p{padding:10px 0px 15px 5px;}
Để giúp nhớ trật tự này, nghĩ về di chuyển của kim đồng hồ bắt đầu từ đỉnh hộp.
Bạn không bị bắt buộc cung cấp giá trị cho tất cả các lề, giá trị bạn cung cấp được biên dịch dựa
trên có bao nhiêu giá trị bạn cung cấp. Nếu bạn chỉ chỉ ra một giá trị đơn, nó áp dụng cho cả
bốn cạnh đều nhau. Hai giá trị thiết lập không gian padding cho lề top/bottom và sau đó là lề
right/left. Ví dụ, quy tắc style sau thiết lập không gian padding đỉnh và đáy là 10 pixels,
trái và phải là 5 pixels:
p{padding:10px 5px;}
Nếu bạn điền ba giá trị, không gian padding được thiết lập cho lề top, right/left và bottom.Quy
tắc style sau thiết lập không gian padding đỉnh là 10 pixels không gian trái/phải là 5 pixels
, và không gian đáy là 0 pixel:
p{padding:10px 5px 0px;}
Nếu bạn muốn định nghĩa không gian padding cho một lề mà không cho lề khác, bạn có thể áp dụng
các đặc tính style sau:
padding-top:size;
padding-right:size;
padding-bottom:size;
padding-left:size;
Quy tắc style sau thiết lập padding đỉnh của đoạn văn thành 10 pixels nhưng nó không áp dụng
padding cho ba lề còn lại:
p{padding-top:10px;}
Đường biên (border)
Đường biên chỉ mang tính chất mô phỏng của một mô hình hộp ảo (virtual box) (tức là khi trình
bày bố cục của một phần tử, không ai vẽ ra đường biên này cả). Nó chỉ xác định ranh giới giữa
một phần tử cùng kích thước của nó với cứa sổ trình duyệt hay với các phần tử xung quanh.
Để xác định kích thước đường biên ta sử dụng đặc tính border-width:
border-width:size;
Quy tắc sử dụng đặc tính border-width tương tự như đặc tính padding với:
border-width:top right bottom left;
hay với các đặc tính border-top-width, border-right-width. border-bottom-width và border-left-width
Margin
Không gian margin cái bao gồm không gian giữa đường biên của hộp với cửa sổ trình duyệt hay với các
phần tử xung quanh trong tài liệu.
Để xác định không gian margin ta sử dụng đặc tính margin:
margin:size;
Quy tắc sử dụng đặc tính margin tương tự như đặc tính padding với:
margin:top right bottom left;
Margin của mỗi cạnh riêng rẽ được thiết lập sử dụng:
margin-top:size;
margin-right:size;
margin-bottom:size;
margin-left:size;
Nơi lại một lần nữa size được thể hiện bởi một trong những đơn vị chiều dài CSS hay sử dụng từ
khóa auto để cho trình duyệt tự động thiết lập.