আমি যখন প্রথম এইচটিএমএল এবং সিএসএস ব্যবহার করে মার্কআপ লিখতে শিখতে শুরু করি, তখন বক্স মডেলের মার্জিন এবং প্যাডিংয়ের মধ্যে পার্থক্যগুলিকে ঘিরে আমার মনকে গুটিয়ে নিতে কিছুটা সময় লেগেছিল। এই নিবন্ধে, আমি ভাগ করব কিভাবে আমি অবশেষে দুটির মধ্যে পার্থক্য করতে সক্ষম হয়েছি।
মার্জিন এবং প্যাডিং সম্পর্কে কথা বলার সময়, CSS বক্স মডেল কীভাবে কাজ করে তা পর্যালোচনা করা ভাল। বক্স মডেলের কথা চিন্তা করুন - যে পাত্রে আমরা আমাদের ওয়েবসাইটের উপাদানগুলি রাখি - একটি ছবি হিসাবে যা একটি ছবির ফ্রেমে স্থাপন করা হয়েছে:
সামগ্রী ছবি নিজেই - যে জিনিসটি আমরা পাত্রে রাখতে চাই। এর চারপাশেই রয়েছে প্যাডিং .
যদি আমরা একটি ফ্রেমের দোকানে থাকতাম, তাহলে প্যাডিংটি ম্যাটিং হবে, যা একটি বড় ছবির ফ্রেমের প্রয়োজনের দিকে নিয়ে যায়। যখন আমরা CSS-এ প্যাডিং যোগ করি, তখন কন্টেইনারকে বড় করার জন্য আমরা মূলত আমাদের কন্টেন্ট বক্সটি পুশ করি। প্যাডিং হল বিষয়বস্তু এবং সীমানার মধ্যবর্তী স্থান।
এরপর আসে সীমান্ত - এটি মূলত ফ্রেম যা আমাদের বিষয়বস্তু এবং প্যাডিং ধারণ করে। মার্জিন আমাদের ভিউপোর্টে (দেয়াল) সংলগ্ন উপাদানগুলির (আমাদের ছবির ফ্রেম) মধ্যে স্থান।
তাই প্রশ্ন হয়ে যায়:কখন আমাদের মার্জিন ব্যবহার করা উচিত এবং কখন প্যাডিং ব্যবহার করা উচিত?
কেউ কেউ বলতে পারে এর উত্তরটি একটু বিষয়ভিত্তিক, কিন্তু সাধারণভাবে সিএসএস মার্জিন ব্যবহার করা একটি ভাল ধারণা যদি আমরা পৃষ্ঠার অন্যান্য উপাদানগুলির সাথে একটি উপাদানকে কীভাবে দেখায় তা সামঞ্জস্য করতে চাই। প্যাডিং ব্যবহার করা উচিত যখন আমরা কন্টেন্টের চারপাশে জায়গা বড় করতে চাই।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
মার্জিন এবং প্যাডিং সেট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margin vs Padding</title>
</head>
<style>
body {
background: darkslategray;
width: 100%;
height: 100vh;
max-width: 800px;
display: flex;
margin: 0 auto;
justify-content: space-evenly;
align-items: center;
}
#star-wars {
background: ivory;
border: 20px solid cyan;
}
#lotr {
background: ivory;
border: 20px solid green;
}
</style>
<body>
<div id="star-wars">
<h3>Star Wars Chars</h3>
<div>
<p>Hans Solo</p>
<p>Luke Skywalker</p>
<p>Obi Wan Kenobi</p>
<p>Chewbacca</p>
<p>R2D2</p>
<p>C3PO</p>
</div>
</div>
<div id="lotr">
<h3>Lord of the Rings Chars</h3>
<div>
<p>Bilbo</p>
<p>Gandalf</p>
<p>Frodo</p>
<p>Sam</p>
<p>Legolas</p>
<p>Aragorn</p>
</div>
</div>
</body>
</html>
উপরের কোড এডিটরে, মৌলিক ব্যাকগ্রাউন্ড, বিষয়বস্তু এবং সীমানা সহ দুটি বাক্স সেট করা আছে। একটি দৃশ্যকল্প কল্পনা করুন যেখানে আপনি প্যাডিং এবং মার্জিন প্রতিটি দিকে ভিন্ন হতে চান। <style>-এ ট্যাগ, সব দিকে বিভিন্ন আকার ব্যবহার করার চেষ্টা করুন, যেমন:
#star-wars {
background: ivory;
border: 20px solid cyan;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
বলা হচ্ছে, আপনি ব্যবহার করতে পারেন এমন একটি শর্টহ্যান্ড আছে:margin: 10px 25px 30px 5px; সংখ্যাগুলি সমস্যায় রয়েছে (TRBL):শীর্ষ, ডান, নীচে এবং বাম!৷ এই অর্ডারটি আপনি শুধুমাত্র মার্জিন এবং প্যাডিংই পাবেন না, বরং আপনার বাক্সের দিকগুলি বর্ণনা করতে শর্টহ্যান্ড ব্যবহার করে এমন কোনও সম্পত্তি পাবেন।
সম্ভবত, আপনার এমন একটি দৃশ্য থাকবে যেখানে উপরের এবং নীচের মার্জিন/প্যাডিং একই হবে এবং বাম এবং ডান মার্জিন একই হবে। যদি এটি ঘটে, আপনি একটি শর্টকাট ব্যবহার করতে পারেন:
#star-wars {
background: ivory;
border: 20px solid cyan;
margin: 20px 30px;
padding: 30px 20px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin: 20px 30px;
padding: 30px 20px;
প্রথম সংখ্যাটি উপরের এবং নীচের মার্জিন/প্যাডিং এবং দ্বিতীয় সংখ্যাটি বাম এবং ডান মার্জিন/প্যাডিং।
যদি সমস্ত দিক একই হতে চলেছে, আপনি কেবল বলতে পারেন padding: 30px; or margin: 30px;
উপসংহার
এই নিবন্ধে, আমরা বক্স মডেলের দিকগুলি পর্যালোচনা করেছি এবং আলোচনা করেছি কিভাবে মার্জিন এবং প্যাডিং আলাদা। মনে রাখবেন যে মার্জিন সীমানার বাইরের স্থানের সাথে ডিল করে এবং প্যাডিং সীমান্তের ভিতরের স্থানের সাথে ডিল করে। উপরের কোড এডিটরে কন্টেইনারগুলির মার্জিন এবং প্যাডিং নিয়ে খেলতে থাকুন এবং আপনি অল্প সময়ের মধ্যেই মার্জিন এবং প্যাডিং সেট করতে পারদর্শী হয়ে উঠবেন।
