সিএসএস প্যাডিং(CSS Padding)
সিএসএস(CSS) টিউটোরিয়াল
প্যাডিং বৈশিষ্ট্য আপনাকে কোনও উপাদান এবং এর সীমানার মধ্যবর্তী স্থানগুলির মধ্যে কতটা স্থান উপস্থিত হওয়া উচিত তা নির্দিষ্ট করতে দেয় -
এই বৈশিষ্ট্যের মান হয় দৈর্ঘ্য, শতাংশ, বা শব্দের উত্তরাধিকারী হওয়া উচিত। মানটি উত্তরাধিকারী হলে এর প্যারেন্ট উপাদান হিসাবে একই প্যাডিং থাকবে। যদি শতাংশ ব্যবহার করা হয় তবে শতাংশটি হ'ল বাক্সের।
নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি তালিকা নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। আপনি নীচের বৈশিষ্ট্যগুলি ব্যবহার করে বাক্সের প্রতিটি পাশে প্যাডিংয়ের জন্য বিভিন্ন মান সেট করতে পারেন -
- প্যাডিং-ডাউনটি একটি উপাদানের নীচে প্যাডিং নির্দিষ্ট করে।
- প্যাডিং-শীর্ষ একটি উপাদানের শীর্ষ প্যাডিং নির্দিষ্ট করে।
- প্যাডিং-বাম একটি উপাদানের বাম প্যাডিং নির্দিষ্ট করে।
- প্যাডিং-রাইট একটি উপাদানের ডান প্যাডিং নির্দিষ্ট করে।
- প্যাডিং পূর্ববর্তী বৈশিষ্ট্যগুলির জন্য শর্টহ্যান্ড হিসাবে কাজ করে।
প্যাডিং-ডাউন প্রোপার্টি
প্যাডিং-নীচের সম্পত্তিটি একটি উপাদানের নীচে প্যাডিং (স্থান) সেট করে। এটি দৈর্ঘ্যের ক্ষেত্রে একটি মান নিতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>
প্যাডিং শীর্ষস্থানীয় সম্পত্তি
প্যাডিং-শীর্ষের বৈশিষ্ট্য একটি উপাদানের শীর্ষ প্যাডিং (স্থান) সেট করে। এটি দৈর্ঘ্যের ক্ষেত্রে একটি মান নিতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>
প্যাডিং-বাম সম্পত্তি
প্যাডিং-বাম সম্পত্তি একটি উপাদানের বাম প্যাডিং (স্থান) সেট করে। এটি দৈর্ঘ্যের দিক থেকে একটি মান নিতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>
প্যাডিং-রাইট প্রপার্টি
প্যাডিং-রাইট প্রপার্টি কোনও উপাদানের ডান প্যাডিং (স্পেস) সেট করে। এটি দৈর্ঘ্যের দিক থেকে একটি মান নিতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>
প্যাডিং সম্পত্তি
প্যাডিং বৈশিষ্ট্যটি একটি উপাদানের বাম, ডান, উপর এবং নীচে প্যাডিং (স্থান) নির্ধারণ করে। এটি দৈর্ঘ্যের দিক থেকে একটি মান নিতে পারে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>