How to use border-box In HTML
In the border-box property, when you set the width and height of an element, it includes the content, padding, and borders altogether. Use the box-sizing property to specify the box model. In this case, set it to border-box. Use width: 200px; to set the width of the element to 200 pixels.
Example: Illustration of Box-sizing property control the size of HTML elements using border-box.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Border-box Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="border-box-example"> <h2>border-box Example</h2> <p>border paragraph.</p> </div> </body> </html> |
CSS
/* style.css*/.border-box-example { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; margin: 20px; background-color: #87CEEB; text-align: center; font-family: Arial, sans-serif; } |
Output:
How does the CSS Box-sizing Property control the size of HTML Elements ?
The box-sizing property in CSS tells us how to figure out the complete width and height of an element. It decides whether to include things like padding and borders in that calculation or not.