हम एलिमेंट के कंटेंट के लिए विशेष रूप से ऊंचाई और चौड़ाई परिभाषित कर सकते हैं, हालांकि ये प्रॉपर्टीज मार्जिन, पैडिंग या बॉर्डर को शामिल नहीं करती हैं।
सिंटैक्स
CSS height प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { height: /*value*/ }
CSS width प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { width: /*value*/ }
आइए width और height प्रॉपर्टीज का एक उदाहरण देखते हैं:
उदाहरण
<!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>
आउटपुट
आइए width और height प्रॉपर्टीज का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!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>
आउटपुट
