न केवल तत्व की चौड़ाई, बल्कि ऊंचाई को बदलने के लिए बॉक्स-आकार की संपत्ति का उपयोग करें।
CSS3 का उपयोग करके बॉक्स-साइज़िंग के साथ बॉक्स की चौड़ाई के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 200px;
height: 200px;
display: inline-block;
}
.contentBox {
padding: 50px;
border: 1px solid rgb(255, 0, 128);
}
.borderBox {
box-sizing: border-box;
padding: 50px;
border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
</div>
<div class="borderBox">
This div has box sizing property
</div>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
