কম্পিউটার টিউটোরিয়াল

CSS মার্জিন এবং প্যাডিং


মার্জিনের জন্য CSS margin প্রপার্টি ব্যবহার করা হয়। margin প্রপার্টি একটি HTML এলিমেন্টের চারপাশের স্পেস সংজ্ঞায়িত করে।

প্যাডিংয়ের জন্য, padding প্রপার্টি আপনাকে নির্দিষ্ট করতে দেয় যে একটি এলিমেন্টের কন্টেন্ট এবং এর বর্ডারের মধ্যে কতটুকু স্পেস থাকবে।

উদাহরণ

নিচের কোডটি CSS-এ মার্জিন এবং প্যাডিং প্রদর্শন করে:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.outer-div {
    border: 2px solid purple;
    width: 300px;
    height: 200px;
}
.inner-div {
    border: 2px solid green;
    margin: 20px;
    padding-left: 20px;
}
</style>
</head>
<body>
<h1>Margin and padding example</h1>
<div class="outer-div">
<div class="inner-div"> Some sample text inside the inner div which will be padded by 20px all sides. </div>
</div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS মার্জিন এবং প্যাডিং


  1. CSS-এ 의사-ক্লাস এবং CSS ক্লাস

  2. CSS-এ এলিমেন্টের Width এবং Height

  3. CSS দিয়ে সেন্ট্রাল, হরিজন্টাল এবং ভার্টিক্যাল অ্যালাইনমেন্ট

  4. CSS Pseudo-classes (সুডো-ক্লাস) এবং সব CSS ক্লাস