GIẢI THÍCH:
- Phần tử 1 được thiết lập thuộc tính box-sizing với giá trị content-box, điều đó có nghĩa là khi chúng ta sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) cho phần tử thì chiều rộng (chiều cao) đó chỉ là chiều rộng (chiều cao) của phần nội dung "content" của phần tử.
- Điển hình như các bạn sẽ thấy:
- Chiều rộng của phần tử 1 = width + padding + border = 380px
- Chiều cao của phần tử 1 = height + padding + border = 230px
- Phần tử 2 được thiết lập thuộc tính box-sizing với giá trị border-box, điều đó có nghĩa là khi chúng ta sử dụng thuộc tính width (height) để thiết lập chiều rộng (chiều cao) cho phần tử thì chiều rộng (chiều cao) đó chính là chiều rộng (chiều cao) của nguyên cả phần tử.
- Điển hình như các bạn sẽ thấy:
- Chiều rộng của phần tử 2 = width = 300px
- Chiều cao của phần tử 2 = height = 150px