Everything about css box sizing property

What is box-sizing?

Imagine there is a box with content and the width of that box
is 200px. Now if we add border 10px from left and right side then the box width will increase.
It means after add border the width will be 220px.Now if we add padding 10px from the right and left side then the total width of the box will be 240px. But we don't want
to increase the width. To solve this problem we use box-sizing property.
The values are:
box-sizing: border-box;
This property helpS us to solve that problem. If you use this property the width will not increase if you add padding, margin or border.
box-sizing:content-box
This is the default value. We don't need to use this value

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
</style>
    #first_heading{
        border:solid 5px red;
        padding:10px;
        width:500px;
        height:500px;
    }
    .last_heading{
        border:solid 5px red;
        padding:10px;
        width:500px;
        height:500px;
        box-sizing:border-box;
    }
</head>
<body>

<h2 id="first_heading">Welcome to this website</h2>
<h3 class="last_heading">Thanks for choosing this website</h3>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us