http://vietjack.com/css/index.jsp Copyright © vietjack.com Thuộc tính box sizing CSS3 Thuộc tính box sizing sử dụng để thay đổi chiều cao độ rộng phần tử Bắt đầu từ CSS2, thuộc tính box làm việc sau: width + padding + border = chiều rộng thực phần tử box height + padding + border = chiều cao thực phần tử box Nghĩa là, bạn xác định chiều cao chiều rộng, kích cỡ box lớn chút phải cộng thêm padding border vào chiều cao độ rộng bạn thiết lập Thuộc tính sizing CSS2 Ví dụ sau minh họa cách sử dụng thuộc tính sizing CSS2: div1 { width: 200px; height: 100px; border: 1px solid green; } div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } Hoc CSS co ban tai VietJack Hoc CSS co ban tai VietJack Kết Trong ví dụ trên, thiết lập chiều cao chiều rộng cho hai hình ảnh nhau, nhiên bạn thấy kết hiển thị khác nhau, hình thứ hai thêm thuộc tính padding Thuộc tính box sizing CSS3 Ví dụ minh họa cách sử dụng thuộc tính box-sizing CSS3: div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } Hoc CSS co ban tai VietJack Hoc CSS co ban tai VietJack Trong ví dụ trên, bạn để ý hai hình ảnh có chiều cao chiều rộng thuộc tính box-sizing:border-box http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com Kết là: Mặc dù hình ảnh thứ hai, xác định thêm thuộc tính padding, nhiên việc sử dụng thuộc tính box-sizing:border-box, chiều cao chiều rộng hai hình http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... Mặc dù hình ảnh thứ hai, xác định thêm thuộc tính padding, nhiên việc sử dụng thuộc tính box- sizing: border -box, chiều cao chiều rộng hai hình http://vietjack.com/