Giáo trình Thực hành CSS - Bài 4: Các thuộc tính của Box Model như Border, Margin, Padding

LAB 4: CSS (CB)
CÁC THUỘC TÍNH CỦA BOX MODEL NHƯ: BORDER – MARGIN – PADDING
A – LÝ THUYẾT
I – MÔ HÌNH HỘP BOX MODEL
1 – Khái quát mô hình Box Model
	Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên mô tả cấu trúc minh họa mô hình hộp cho một thành phần web. 
Mô hình hộp bên chỉ là một mô hình lý thuyết lý tưởng. Bên dưới đây chúng ta sẽ xét mô hình hộp của một đối tượng web cụ thể:
2 – Ví dụ minh họa cho mô hình Box Model
Mã code:
Hình ảnh hiển thị tương ứng:
II – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA BORDER
Border là chính là phần khung bao quanh các đối tượng. Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để hiển thị và tạo kiểu cho border của các đối tượng trong web
1 – Thuộc tính border-width
Khái niệm
border-width chính là độ dầy của đường bao ngoài hay nói cách khác là độ dầy của border
Cách sử dụng
border-width: value. Trong đó value nhận một trong các giá trị sau:
Đơn vị độ dài cụ thể như pixels
Ngoài ra chúng ta cũng có thể sử dụng các giá trị như:
thin (mảnh)
medium (vừa)
thick (dày)
2 - Thuộc tính border-color
Định nghĩa
Mầu của đường viền
Cách sử dụng
border-color: value. Trong đó value nhận một trong các giá trị sau:
Tên mầu 
Mã mầu
3 - Thuộc tính border-style 
Định nghĩa
Thể hiện kiểu dáng của đường viền. Trong CSS có cung cấp cho chúng ta tất cả 8 kiểu đường viền tương ứng với 8 giá trị của thuộc tính border-style: dotted, dashed, solid, double, groove, ridge, inset và outset
Cách sử dụng
border-style: value. Trong đó value nhận một trong các giá trị sau:
solid: Nét liền
dotted: Chấm đứt
dashed: Gạch đứt
double: Đường viền kép
groove: Đường viền hằm sâu xuống
ridge: Đường viền nổi lên
inset: Đường viền tạo cho nội dung bên trong nó hằn sâu xuống
outset: Đường viền tạo cho nội dung bên trong nó nổi lên
Mã code:
Hình ảnh hiển thị tương ứng:
4 – Cách viết rút gọn để khai báo border
Để khai báo border cho một đối tượng nào đó chúng ta có thể khai báo rút gọn như sau:
border: value_1 value_2 value_3. Trong đó:
value_1: Là giá trị thể hiện độ dầy của đường viền
value_2: Là giá trị thể hiện style của đường viền
value_3: Là giá trị thể hiện mầu của đường viền
Mã code rút gọn:
III – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA MARGIN	
1 – Làm việc với các thuộc tính Margin
Định nghĩa
Margin chính là thuộc tính quy định khoảng cách từ đối tượng mà chúng ta đang xét tới các đối tượng khác xung quanh nó
Trong CSS có quy định 4 thuộc tính để khai báo và làm việc với Margin đó là margin-left, margin-right, margin-top, margin-bottom
Cách sử dụng
margin-left: value
margin-right: value
margin-top: value
margin-bottom: value
Với value là các giá trị của đơn vị độ dài
Mã code:
2 – Cách thức viết rút gọn để khai báo Margin cho một đối tượng
Trong quá trình làm việc nhiều khi chúng ta có thể khai báo Margin theo các cách rút gọn như sau:
margin: value_1 value_2 value_3 value_4. Trong đó
value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trên nó
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên phải nó
value_3: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên dưới nó
value_4: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trái nó
margin: value_1 value_2. Trong đó
value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trên và dưới nó
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên phải và trái nó
margin: value. Trong đó
value: Là khoảng cách từ đối tượng đang xét đến bốn phía (trên, dưới, trái, phải) của nó
Mã code rút gọn
IV – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA	 PADDING
1 – Làm việc với các thuộc tính Padding
Định nghĩa
Padding là thuộc tính quy định khoảng cách từ đường viền của một đối tượng tới các thành phần nằm bên trong nó
Trong CSS có quy định 4 thuộc tính để khai báo và làm việc với Padding đó là padding-left, padding -right, padding -top, padding –bottom
Cách sử dụng
padding-left: value
padding-right: value
padding-top: value
padding-bottom: value
Với value là các giá trị của đơn vị độ dài
Mã code:
Hình ảnh hiển thị tương ứng:
2 – Cách thức viết rút gọn để khai báo Padding cho một đối tượng
Trong quá trình làm việc nhiều khi chúng ta có thể khai báo Padding theo các cách rút gọn như sau:
padding: value_1 value_2 value_3 value_4. Trong đó
value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ trên xuống
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ phải sang
value_3: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ phía dưới
value_4: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ trái sang
padding: value_1 value_2. Trong đó
value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong xét theo chiều dọc (trên và dưới)
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong xét theo chiều ngang (trái vài phải)
padding: value. Trong đó
value: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong theo bốn phía (trên, dưới, trái, phải) của nó
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
Bài 1:
	Sử dụng tối đa các thuộc tính của Box Model trong CSS để hoàn thành khối Menu như hình dưới đây. Cho biết các yêu cầu thiết kế như sau:
Độ rộng của Menu là 200px
Chiều cao của phần Menu Title là 36px
Các Icon Menu cách các đối tượng xung quanh10px
Menu có đường viền dầy 1px và có mầu #CDCDCD
Xem file bài giải bai_tap_1.html để phục vụ cho việc thiết kế được chính xác hơn
II – BÀI TẬP VỀ NHÀ
Bài 2:
Hoàn thiện giao diện website như hình dưới đây với các yêu cầu về thiết kế như sau:
Đối với Menu ngang
Padding trái và phải của các menu item là 5px
Khi hover thì đổi mầu link và đổi mầu nền của thẻ td
Đối với Menu Trái và Phải
Các khối Menu bên Trái và bên Phải chứa đường viền có độ dầy 1px
Các Menu item cách biên bên trái 5px
Đối với phần Intro (Giới thiệu)
Phần nội dung bên trong khung giới thiệu cách các đối tượng bên ngoài nó 10px
Đối với hiển thị nội dung vắn tắt các bài viết
Tiêu đề các danh mục chính cách các biên bên Trái và bên phải tương ứng là 5px
 Ảnh mô tả có dường viền dầy 1px và có mầu #CDCDCD, cách ảnh 2px và cách các đối tượng bên ngoài theo phía trái và phải tương ứng là 5px
Chú ý: Xem file bài giải bai_tap_2.html để phục vụ cho việc thiết kế được chính xác hơn