CSS-এ এলিমেন্টের Width এবং Height

CSS height এবং width প্রপার্টি যথাক্রমে একটি এলিমেন্টের উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। আমরা এই প্রপার্টিগুলোর জন্য সর্বোচ্চ এবং সর্বনিম্ন মানও সেট করতে পারি max-height, max-width, min-height, এবং min-width প্রপার্টি ব্যবহার করে।

সিনট্যাক্স

CSS height এবং CSS width প্রপার্টির সিনট্যাক্স নিচের মতো:

Selector {    height: /*value*/    width: /*value*/ }

এলিমেন্টের প্রকৃত প্রস্থ এবং উচ্চতা নিচেরভাবে ক্যালকুলেট হয়:

উদাহরণ

নিচের উদাহরণগুলো CSS height এবং CSS width প্রপার্টি ব্যাখ্যা করে:

<!DOCTYPE html> <html> <head> <style> #demo {    margin: auto;    width: 400px;    height: 80px;    border: 2px solid black;    display: flex;    border-radius: 15px; } #demo div {    flex: 1;    border: thin dotted;    border-radius: 50%;    line-height: 60px;    text-align: center; } #orange {    box-shadow: inset 0 0 8px orange; } #green {    box-shadow: inset 0 0 8px green; } #blue {    box-shadow: inset 0 0 8px blue; } #red {    box-shadow: inset 0 0 8px red; } </style> </head> <body> <div id="demo"> <div id="orange">Somebody</div> <div id="green">that I</div> <div id="blue">used</div> <div id="red">to know</div> </div> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট:

উদাহরণ

<!DOCTYPE html> <html> <head> <style> article {    margin: 10% 35%;    box-shadow: 0 0 6px 1px black;    max-width: 200px;    max-height: 150px;    overflow: auto; } </style> </head> <body> <h2>Java 8 Features</h2> <article> Lambda expression adds functional processing capability to Java. Referencing functions by their names instead of invoking them directly. Interface to have default method implementation. New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies. New stream API to facilitate pipeline processing. Improved date time API. Emphasis on best practices to handle null values properly. Nashorn, a Java-based engine to execute JavaScript code. </article> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট: