Thuộc Tính Box Sizing Trong CSS3

Trang chủ » Sử Dụng Box-sizing Trong Css » Thuộc Tính Box Sizing Trong CSS3

Có thể bạn quan tâm

Thuộc tính box sizing trong CSS3 Trang trước Trang sau

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử.

Bắt đầu từ CSS2, thuộc tính box làm việc như sau:

width + padding + border = chiều rộng thực sự của một phần tử box

height + padding + border = chiều cao thực sự của một phần tử box

Nghĩa là, khi bạn đã xác định chiều cao và chiều rộng, thì kích cỡ của box sẽ lớn hơn một chút do phải cộng thêm padding và border vào chiều cao và độ rộng bạn đã thiết lập.

Thuộc tính sizing trong CSS2

Ví dụ sau minh họa cách sử dụng của thuộc tính sizing trong CSS2:

<html> <head> <style> .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } </style> </head> <body> <div class="div1">Hoc CSS co ban tai VietJack</div></br> <div class="div2">Hoc CSS co ban tai VietJack</div> </body> </html> Quảng cáo

Kết quả là

Trong ví dụ trên, mình thiết lập chiều cao và chiều rộng cho hai hình ảnh là như nhau, tuy nhiên bạn có thể thấy rằng kết quả hiển thị là khác nhau, đó là do trong hình thứ hai mình thêm thuộc tính padding.

Thuộc tính box sizing trong CSS3

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính box-sizing trong CSS3:

<html> <head> <style> .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; } </style> </head> <body> <div class="div1">Hoc CSS co ban tai VietJack</div></br> <div class="div2">Hoc CSS co ban tai VietJack</div> </body> </html>

Trong ví dụ trên, bạn để ý rằng cả hai hình ảnh đều có cùng chiều cao và chiều rộng và cùng thuộc tính box-sizing:border-box.

Kết quả là:

Mặc dù trong hình ảnh thứ hai, mình xác định thêm thuộc tính padding, tuy nhiên bằng việc sử dụng cùng thuộc tính box-sizing:border-box, thì chiều cao và chiều rộng của hai hình vẫn là như nhau.

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com:

  • Cú pháp CSS
  • CSS - Include CSS vào HTML
  • CSS - Màu (Color)
  • CSS - Background
  • CSS - Định dạng Font
  • CSS - Hình ảnh
  • CSS - Trang trí Link
  • CSS - Bảng
  • CSS - Đường viền (Border)
  • CSS - Căn lề (Margin)
  • CSS - Padding
Trang trước Trang sau Bài viết liên quan

  • 160 bài học ngữ pháp tiếng Anh hay nhất

  • 155 bài học Java tiếng Việt hay nhất

  • 100 bài học Android tiếng Việt hay nhất

  • 247 bài học CSS tiếng Việt hay nhất

  • 197 thẻ HTML cơ bản

  • 297 bài học PHP

  • 101 bài học C++ hay nhất

  • 97 bài tập C++ có giải hay nhất

  • 208 bài học Javascript có giải hay nhất

Từ khóa » Sử Dụng Box-sizing Trong Css