Trong Bài 06 thì tôi đã có giới thiệu sơ qua với các bạn về cấu trúc của một phần tử HTML rồi, nó bao gồm bốn thành phần chính: margin, border, padding, content
- margin
- border
- padding
- content
– Tuy cấu trúc của phần tử có bốn thành phần, nhưng khi nói về “kích thước của phần tử” thì nó chỉ được tính dựa trên ba thành phần (border, padding, content)
– Ví dụ:
- Khi nói về “chiều rộng” của phần tử thì nó sẽ được tính dựa trên tổng: độ dày đường viền bên trái + độ dày đường viền bên phải + vùng đệm bên trái + vùng đệm bên phải + chiều rộng phần nội dung.
- Khi nói về “chiều cao” của phần tử thì nó sẽ được tính dựa trên tổng: độ dày đường viền phía trên + độ dày đường viền phía dưới + vùng đệm trên + vùng đệm dưới + chiều cao phần nội dung.
Cách thiết lập chiều rộng phần nội dung
– Để thiết lập chiều rộng cho phần nội dung (content) của phần tử thì chúng ta sử dụng thuộc tính width.
- margin
- border
- padding
- content
- (width)
– Cú pháp:
width: value;– Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị bên dưới:
| auto | – Trình duyệt sẽ tự động xác định chiều rộng phần nội dung của phần tử. | Xem ví dụ |
| length | – Chỉ định chiều rộng phần nội dung của phần tử dựa theo một giá trị cụ thể (giá trị này có thể được xác định dựa theo các đơn vị như: px, em, cm, . . . .) | Xem ví dụ |
| % | – Chỉ định chiều rộng phần nội dung của phần tử dựa theo “tỷ lệ phần trăm” chiều rộng phần nội dung của cha nó. | Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính width có giá trị là auto) |
Xem ví dụ |
| inherit | – Kế thừa giá trị thuộc tính width từ phần tử cha của nó. | Xem ví dụ |
Cách thiết lập chiều cao phần nội dung
– Để thiết lập chiều cao cho phần nội dung (content) của phần tử thì chúng ta sử dụng thuộc tính height.
- margin
- border
- padding
- content
- (height)
– Cú pháp:
height: value;– Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị bên dưới:
| auto | – Trình duyệt sẽ tự động xác định chiều cao phần nội dung của phần tử. | Xem ví dụ |
| length | – Chỉ định chiều cao phần nội dung của phần tử dựa theo một giá trị cụ thể (giá trị này có thể được xác định dựa theo các đơn vị như: px, em, cm, . . . .) | Xem ví dụ |
| % | – Chỉ định chiều cao phần nội dung của phần tử dựa theo “tỷ lệ phần trăm” chiều cao phần nội dung của cha nó. | Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính height có giá trị là auto) |
Xem ví dụ |
| inherit | – Kế thừa giá trị thuộc tính height từ phần tử cha của nó. | Xem ví dụ |
