What is the use of CSS ruleset ?

What is the use of box-sizing property in CSS ?

Last Updated : 10 May, 2023

In this article we will learn about to use of the box-sizing property in CSS, The box-sizing property defines how the width and height of an element should be visible to the user i.e. border and padding are to be included or not.

Syntax:

box-sizing: content-box|border-box;

Property Values:

content-box (default value)
border-box: It tells the browser that the values specified for an element's width and height will include content, padding, and borders. This typically makes it much easier to size elements. The box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements. For example - If you set an element's width to 200 and height to 100 pixels, that 200 and 100 pixels will include any border or padding that you have added and the content box will shrink to absorb that extra width and height.

Syntax:

box-sizing: border-box;

Dimensions of the element are calculated as:

width = border + padding + width of the content  
height = border + padding + height of the content

Example: In this example, we using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>box-sizing Property</title>

    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 2px solid orange;
            background: green;
            color: white;
            display: inline-block
        }
        
        .box {
            box-sizing: border-box;
        }
    </style>
</head>

<body style="text-align:center;">
    <h2>{box-sizing: border-box;}</h2>
    <br>
    <div class="box">GeeksforGeeks</div>
</body>
</html>

Output:

The following figure illustrates the {box-sizing: border-box:} for the above example.

Browser Support: The browser that fully supports box-sizing property are listed below -

Google Chrome 10.0 4.0 -webkit-
Internet Explorer 8.0
Firefox 29.0 2.0 -moz-
Opera 9.5
Apple Safari 5.1 3.2 -webkit-

What is the use of CSS ruleset ?

S

siddharth01

Improve

Article Tags :

Similar Reads

Which property is used to set the height of a box in CSS ?

In this article, we will learn about the property that is responsible to set the height of a box. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you

What are the usage of "table-layout" property in CSS ?

In this article, we are going to learn the usages of the table-layout property in CSS, The table-layout property in CSS specifies the layout of the table which consists of table cells, rows, and columns. It can have two values: "auto," which allows the table to adjust its layout based on content, an

What is the use of CSS ruleset ?

In this article, we will learn about the CSS Ruleset & its implementation. The CSS Ruleset is various affirmations to various pieces or elements of the document. The objective is to apply a bunch of properties for certain distinct qualities to a solitary, or a particular arrangement of component

CSS box-sizing Property

The CSS box-sizing property controls how an element's size is calculated. When using the border-box model, the padding and border are included in the elementâ€™s total width and height, making it easier to manage the layout.Syntaxbox-sizing: content-box | border-box;Property ValuesHere is a descriptio

Which property specifies the width of a border in CSS ?

In this article, we will learn to set the border's size of any element using the CSS border-width property. It can take up to 4 values. Users can consider the below values for the border-width property and use them according to their requirements. border-width property values: Thin: It specifies the

CSS | min-block-size Property

The min-block-size property in CSS is used to create the minimum horizontal or vertical size of an element. If the writing direction is horizontal then min-block-size is equivalent to min-height property, and if it is in vertical mode then equal to min-width property. Syntax: min-block-size: length|