Box model trong CSS

Bất cứ phần tử nào được tạo ra trong html hay xhtml đều được bao bọc bởi một khối, trong css  mô hình hộp (box model) được sử dụng khi nói về thiết kế và tạo layout web.

Mô hình Box model bao gồm padding (vùng đệm), border (đường viền) và margin (canh lề). Mặc định thì tất cả các giá trị này đều bằng 0, do đó chỉ khi nào các thuộc tính này được khai báo thì ta mới nhìn thấy sự thay đổi của chúng.

Box model trong CSS

Padding: là vùng nằm giữa nội dung và đường viền (border), nó tạo ra một khoảng trống giúp cho nội dung được trình bày rõ ràng hơn .

Các giá trị của padding: bao gồm padding-top; padding-right; padding-bottom; và padding-left.

Border: sẽ quy định độ dày, màu sắc và kiểu hiện thị cũng như kiểu của đường viền.

Các giá trị của border bao gồm: border-width; border-style và border-color, chúng ta luôn phải khai báo border-style, nếu không được khai báo thì nó sẽ có giá trị bằng 0, lúc đó các giá trị của border-with và border-color sẽ không được hiển thị.

dưới đây mình sẽ style một khối để cho các bạn hiểu về padding và border.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

<style type="text/css">     #box-model{         width: 342px;         height: 192px;         padding: 15px;         border:1px #069 solid;         background:#ddd;             } </style> <div id="box-model">Reference site about Lorem Ipsum,     giving information on its origins, as well as a random Lipsum generator.     Reference site about Lorem Ipsum,     giving information on its origins, as well as a     random Lipsum generator.Reference site about Lorem Ipsum,     giving information on its origins, as well as a random Lipsum generator. </div>

và kết quả như bên dưới.

Reference site about Lorem Ipsum,
giving information on its origins, as well as a random Lipsum generator.
Reference site about Lorem Ipsum, giving information on its origins,
as well as a random Lipsum generator.Reference site about Lorem Ipsum,
giving information on its origins, as well as a random Lipsum generator.

Margin: margin là phần nằm ngoài cùng trong mô hình Box model. Nó sẽ tạo ra khoảng các giữa các thành phần với nhau và được tính từ đường viền (border) của phần tử

Các giá trị của margin: bao gồm margin-top; margin-right; margin-bottom; và margin-left.

ví dụ trên chính là ví dụ về Box Model trong css, tất cả những gì của Box Model là Margin , Padding, Border, chỉ vậy thôi nhưng nó tạo nên layout của một trang web. Hãy thử làm theo ví dụ của mình với nhiều phần tử thể thực sự hiểu về Box Model nhé.