हम ऊंचाई और चौड़ाई को विशेष रूप से तत्व की सामग्री के लिए परिभाषित कर सकते हैं, हालांकि इन गुणों में मार्जिन, पैडिंग या बॉर्डर शामिल नहीं हैं।
सिंटैक्स
CSS हाइट प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
height: /*value*/
} CSS चौड़ाई गुण का सिंटैक्स इस प्रकार है -
Selector {
width: /*value*/
} आइए चौड़ाई और ऊंचाई के गुणों का एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv2{
width:200px;
height: 200px;
opacity: .5;
border:1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 2 with some dummy text.
</div>
</div>
<script>
</script>
</body>
</html> आउटपुट
आइए चौड़ाई और ऊंचाई के गुणों का एक और उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 150px;
width:250px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS height and width</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html> आउटपुट
