How to use content-box In HTML
The content box is the default setting for the box-sizing property. In this property, when you set the width and height of an element, those values only consider the content itself. Padding and borders are not counted within these dimensions. Use the box-sizing property to specify the box model. In this case, set it to content-box. This property ensures that the width specified in the next step includes only the content and not padding or border.
Example: Illustration of Box-sizing property control the size of HTML elements using content-box.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Content-box Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content-box-example"> <h2>content-box Example</h2> <p>Content paragraph</p> </div> </body> </html> |
CSS
/* style.css*/.content-box-example { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid black; margin: 20px; background-color: #FFD700; 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.