CSS-এ padding প্রোপার্টি ব্যবহার করে padding-top, padding-right, padding-bottom, padding-left একসাথে সেট করা যায়। এটি একটি শর্টহ্যান্ড প্রোপার্টি।
প্রথমে একটি উদাহরণ দেখি:
উদাহরণস্বরূপ: padding:10px 5px 7px 10px;
এখানে,
top padding is 10px right padding is 5px bottom padding is 7px left padding is 10px
উদাহরণ
নিচের উদাহরণগুলো CSS padding প্রোপার্টি প্রদর্শন করে:
<!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>আউটপুট
এটি নিচের আউটপুট দেবে:
