Bài 14: Cách sử dụng Box Model trong css

Cách sử dụng Box Model trong css

Box Model trong CSS là một khái niệm để mô tả cách mà các phần tử HTML được bố trí và thể hiện trên trang web. Box Model bao gồm các thành phần chính sau:

1. Content: Là phần nội dung của phần tử HTML, bao gồm văn bản, hình ảnh, video, và các phần tử con khác.

2. Padding: Là khoảng trống được thêm vào xung quanh phần nội dung của phần tử HTML.

3. Border: Là đường viền được vẽ xung quanh phần tử HTML, bao gồm độ dày, kiểu và màu sắc của đường viền.

4. Margin: Là khoảng cách giữa phần tử HTML và các phần tử khác trên trang web.

Các thuộc tính CSS liên quan đến Box Model bao gồm:

1. width và height: Thiết lập chiều rộng và chiều cao của phần tử HTML.

2. padding: Thiết lập khoảng trống bên trong phần tử HTML.

3. border: Thiết lập đường viền xung quanh phần tử HTML.

4. margin: Thiết lập khoảng cách giữa phần tử HTML và các phần tử khác trên trang web.

Khi thiết lập các giá trị của các thuộc tính này, bạn cần lưu ý rằng kích thước thực của một phần tử HTML sẽ bao gồm các thành phần Content, Padding, Border và Margin.

Ví dụ:

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

Trong ví dụ trên, phần tử <div> sẽ có kích thước tổng thể là 242px x 142px (bao gồm 200px x 100px cho phần Content, 20px cho mỗi hướng cho phần Padding, 1px cho mỗi hướng cho phần Border và 20px cho mỗi hướng cho phần Margin).

Bạn có thể sử dụng Box Model để tạo ra các bố cục và kiểu dáng tùy chỉnh cho các phần tử HTML của mình trên trang web.