CSS Box Sizing

0
9
  • Thuộc tính box-sizing xác định lại cách tính chiều rộng và chiều cao cho phần tử.

Trường hợp có thuộc tính box-sizing.

  • Theo mặc định, chiều rộng và chiều cao của một phần tử được tính như sau:
  • width + padding + border = chiều rộng thực tế của chiều cao phần tử + padding + border = chiều cao thực của phần tử.
  • Điều này có nghĩa là: Khi bạn đặt chiều rộng / chiều cao của một phần tử, phần tử thường xuất hiện lớn hơn bạn đã đặt (vì đường viền và phần đệm của phần tử được thêm vào chiều rộng / chiều cao được chỉ định của phần tử).
  • Hình minh họa sau đây cho thấy hai phần tử <div> có cùng chiều rộng và chiều cao được chỉ định:

Cú pháp:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Tip : Chúng ta có thể giải quyết vấn đề này với box-sizing.

Khi dùng thuộc tính box-sizing.

Cú pháp:

.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;
}

Kết quả:

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây