শতাংশে একটি উপাদানের প্যাডিং নির্দিষ্ট করে, আমরা এর আকৃতির অনুপাত বজায় রাখতে পারি।
এর জন্য, CSS প্যাডিং প্রপার্টি -
ব্যবহার করুন-
প্যাডিং-বটম একটি উপাদানের নীচের প্যাডিং নির্দিষ্ট করে৷
-
প্যাডিং-টপ একটি উপাদানের উপরের প্যাডিং নির্দিষ্ট করে।
-
প্যাডিং-বাম৷ একটি উপাদানের বাম প্যাডিং নির্দিষ্ট করে।
-
প্যাডিং-ডান একটি উপাদানের সঠিক প্যাডিং নির্দিষ্ট করে।
-
প্যাডিং পূর্ববর্তী বৈশিষ্ট্যগুলির জন্য সংক্ষিপ্ত বিবরণ হিসাবে কাজ করে৷
উদাহরণ
নিম্নোক্ত উদাহরণগুলি আকৃতির অনুপাত বজায় রাখার জন্য CSS প্যাডিং বৈশিষ্ট্যকে চিত্রিত করে।
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
padding-top: 100%;
box-shadow: 0 0 24px steelblue;
position: relative;
width: 100%;
}
div > div {
margin: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<p>Watch the below div</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
উইন্ডোর আকার পরিবর্তন করার পরেও, আকৃতির অনুপাত 1:1 থেকে যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
