CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্য যথাক্রমে একটি উপাদানের উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে ব্যবহৃত হয়। আমরা সর্বোচ্চ-উচ্চতা, সর্বোচ্চ-প্রস্থ, সর্বনিম্ন-উচ্চতা এবং সর্বনিম্ন-প্রস্থ বৈশিষ্ট্যগুলি ব্যবহার করে এই বৈশিষ্ট্যগুলির জন্য সর্বাধিক এবং সর্বনিম্ন মানও সেট করতে পারি৷
সিনট্যাক্স
CSS উচ্চতা এবং CSS প্রস্থ বৈশিষ্ট্যের সিনট্যাক্স নিম্নরূপ -
Selector {
height: /*value*/
width: /*value*/
} উপাদানগুলির প্রকৃত প্রস্থ এবং উচ্চতা নিম্নরূপ গণনা করা হয় -
| বক্সের আকার | গণনা |
|---|---|
| মোট প্রস্থ | প্রস্থ + প্যাডিং-বাম + প্যাডিং-ডান + বর্ডার-বাম + বর্ডার-ডান + মার্জিন-বাম + মার্জিন-ডান |
| মোট উচ্চতা | উচ্চতা + প্যাডিং-টপ + প্যাডিং-বটম + বর্ডার-টপ + বর্ডার-বটম + মার্জিন-টপ + মার্জিন-বটম |
উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS উচ্চতা এবং CSS প্রস্থ বৈশিষ্ট্যগুলি ব্যাখ্যা করে −
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
