Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ width:500px; padding:50px; border:30px dotted crimson; box-sizing:border-box; } </style> </head> <body> <p>- Ví dụ như tôi muốn tạo một cái phần tử có tổng chiều rộng là 500px, trong đó vùng đệm mỗi bên 50px, đường viền 30px.</p> <p>- Thay vì phải lấy 500px - 100px (vùng đệm) - 60px (đường viền) để tính ra giá trị thuộc tính width là 340px thì bây giờ tôi không cần phải tốn nhiều công sức như thế. Tôi sẽ xác định giá trị width là 500px, sau đó thiết lập thuộc tính box-sizing với giá trị border-box thì cho dù vùng đệm và đường viền có giá trị là bao nhiêu đi nữa, phần tử vẫn cố định chiều rộng là 500px.</p> <div> <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ width:500px; padding:50px; border:30px dotted crimson; box-sizing:border-box; } </style> </head> <body> <p>- Ví dụ như tôi muốn tạo một cái phần tử có tổng chiều rộng là 500px, trong đó vùng đệm mỗi bên 50px, đường viền 30px.</p> <p>- Thay vì phải lấy 500px - 100px (vùng đệm) - 60px (đường viền) để tính ra giá trị thuộc tính width là 340px thì bây giờ tôi không cần phải tốn nhiều công sức như thế. Tôi sẽ xác định giá trị width là 500px, sau đó thiết lập thuộc tính box-sizing với giá trị border-box thì cho dù vùng đệm và đường viền có giá trị là bao nhiêu đi nữa, phần tử vẫn cố định chiều rộng là 500px.</p> <div> <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr> </div> </body> </html>