Horje
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.

Syntax

box-sizing: content-box;
box-sizing: inherit;
box-sizing: border-box;

Table of Content

Using content-box

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:

Screenshot-2024-01-24-003005

Using border-box

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:

Screenshot-2024-01-24-002816

Using inherit

The inherit value allows an element to borrow the box-sizing preference from its parent. Use the box-sizing property in the .parent class to set the box model to border-box. This property ensures that the specified width includes both the content and padding but not the border.

Example: Illustration of Box-sizing property control the size of HTML elements using inherit.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width,initial-scale=1.0">
    <title>Inherit Example</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
  
    <!-- Inherit example -->
    <div class="parent">
        <h2>Inherit Example</h2>
        <div class="child">
            <p>This element inherits the 
                box-sizing from its parent.
            </p>
        </div>
    </div>
  
</body>
  
</html>

CSS

/* style.css*/
.parent {
    box-sizing: border-box;
    margin: 20px;
    background-color: #98FB98;
    text-align: center;
    font-family: Arial, sans-serif;
}
  
.child {
    box-sizing: inherit;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: #FFA07A;
}

Output:

imresizer-1706036160747


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Set Width and Height of Span Element using CSS ? How to Set Width and Height of Span Element using CSS ?
How to implement the backface-visibility Property in CSS ? How to implement the backface-visibility Property in CSS ?
How to center an element horizontally using the CSS Box Model ? How to center an element horizontally using the CSS Box Model ?
What is the default value for the box-sizing Property? What is the default value for the box-sizing Property?
How to use the caret-color Property in CSS? How to use the caret-color Property in CSS?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje