Box Model
Tất cả element trong HTML đều như là một box(cái hộp). Do đó, chúng ta có thể hiểu rằng box model như là một cái hộp bao bọc từng element có các thuộc tính sau: nội dung(content), khoảng bao bọc(padding), khung(border), và lề(margin).
Chúng ta có thể hình dung một box model như sau:
Do mỗi element đều có box model nên khi tính width, height của element chúng ta cần xác định:
-Content: nội dung của cái hộp, nơi mà các text hay image chiếm chỗ
-Padding: khoảng không gian trong suốt(không thể thấy) bao bọc element.
-Border: một cái khung bọc element.
-Margin: khoảng không gian trong suốt(không thể thấy) bao quanh element.
Giả sử, chúng ta có một div được format css như sau:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Thì width được tính là:
320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px
Box-sizing
Là cách tính width, height của một element trong css. Có hai cách tính là content-box và border-box. Content box là cách tính khi mà chúng ta bỏ qua padding, margin, border. Nó chỉ tính width, height dựa trên content mà thôi. Ngược lại, border box là cách tính mà chúng ta lấy tất cả: content, padding, border, margin.