Box Sizing CSS Property का उपयोग Default CSS Box Model को बदलने के लिए किया जाता है. जैसे Browser पर Browser द्वारा Element की Height और Width को परिवर्तन करने के लिए उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Sizing</title>
<style>
.div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2 {
width: 200px;
height: 300px;
padding: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div1">Tutorialsroot.com</div></br>
<div class="div2">Tutorialsroot.com</div>
</body>
</html>
| Value | Description |
|---|---|
| content-box | इसमे Width और Height Properties और न्यूनतम अधिकतम Properties मे केवल Content शामिल होते है Border, Padding, और Margin शामिल नहीं होते है . |
| border-box | इसमे Width और Height Properties और न्यूनतम अधिकतम Properties मे Content, Padding और Border शामिल होते है लेकिन Margin नहीं होते है. |
| initial | हम इस Properties को अपनी Default Value पर Set करते है. |
| inherit | हम इस Properties को इसके Parent Element से प्राप्त करते है. |
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Sizing</title>
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em solid blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">My Name is Ammu</div>
<div class="box">My Best Friend is Ali</div>
<div style="clear:both;"></div>
</div>
</body>
</html>