Box model trong CSS

Box model trong CSS

  4:38 AM    Người

---

Các nội dung của Box-model

• Mô hình Box - model
• Margin
• Border
• Padding
• Một số cách viết tắt

Mô hình Box - model

Box - model (Mô hình hộp) là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML, tất cả các thành phần đều tồn tại một hộp bao quanh nó

Các thành phần của Boxmodel gồm:

1. Margin:Canh lề của Box so với các thành phần còn lại
2. Border:Đường viền của Box
3. Padding:Vùng đệm từ nội dung của Box ra đến đường viền

Mặc định các giá trị Margin, Border, Padding đều bằng 0, chỉ thay đổi khi có sự điều chỉnh.

Margin

Margin tạo ra khoảng cách giữa các Box-model với nhau, có 4 thành phần của margin tương ứng với 4 cạnh của Box:

1. Margin-top
2. Margin-right
3. Margin-bottom
4. Margin-left

Ví dụ:
3 đoạn paragraph này sử dụng margin mặc định

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Điều chỉnh Margin-top:35px và margin-bottom:33px cho đoạn văn bản số 2

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Border

Border xác định các đường viền trong một Box-model, các thuộc tính của một Border gồm:

1. Border-style: Kiểu đường viền
2. Border-color: Màu sắc của đường viền
3. Border-width: Độ dày của đường viền

Một số border-style:

• Kiểu Solid
• Kiểu Dashed
• Kiểu Dotted
• Kiểu Double

Padding

Padding xác định khoảng cách từ nội dung đến đường viền (Border), tương tự như margin, padding có thuộc tính tương ứng với 4 border của box

1. Padding-top
2. Padding-right
3. padding-bottom
4. Padding-left

Ví dụ: 3 đoạn paragraph này sử dụng padding mặc định

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Điều chỉnh padding-top:10px và padding-bottom:5px cho đoạn văn bản số 2

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Một số cách viết tắt cho các thuộc tính của Box - model

Các thuộc tính của Margin, Border, Padding áp dụng cho 4 cạnh của một box, do đó, thay vì khai báo thuộc tính cho từng cạnh ta có thể khai báo theo trình tự và trình duyệt tự hiểu các giá trị của mỗi cạnh:

Margin: Thay vì Style="margin-top: 2px; margin-right:3px; margin-bottom:4px; margin-left:5px;", có thể viết ngắn gọn lại thành Style="margin: 2px 3px 4px 5px"

Border Thay vì viết Style="border-width:2px; border-style:solid; border-color:green" có thể viết ngắn gọn lại thành: Style="border: 2px solid green". Thứ tự để viết tắt cho Border là border-width; border-style; border-color.

Padding:Cách viết tắt của Padding tương tự với Margin, có thể viết ngắn gọn thành: Style="padding: 2px 3px 4px 5px"