সিএসএস-এর প্যাডিং বৈশিষ্ট্য আপনাকে প্যাডিং-টপ, প্যাডিং-ডান, প্যাডিং-বটম, প্যাডিং-বামে প্যাডিং সেট করতে দেয়। এটি একটি শর্টহ্যান্ড সম্পত্তি।
আসুন প্রথমে একটি উদাহরণ দেখি -
যেমন:প্যাডিং:10px 5px 7px 10px;
এখানে,
top padding is 10px right padding is 5px bottom padding is 7px left padding is 10px
উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS প্যাডিং বৈশিষ্ট্য −
চিত্রিত করে<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 300px;
padding: 5% 10% 20% 5%;
background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
text-align: center;
font-weight: bold;
font-size: 1.2em;
box-sizing: border-box;
}
div > div {
border-radius: 80px;
padding: 2em 2em;
box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 100px;
padding: 5% 1%;
background-color: papayawhip;
border-radius: 5%;
box-sizing: border-box;
}
div > div {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 2em;
box-shadow: 0 0 9px 1px black;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় −
