CSS margin এবং Padding
আমাদের অনেক সময় এই বিষয়টা কাজে লাগবে । যদি এটি সম্পর্কে একেবারে পরিস্কার ধারনা না থাকে তাহলে কোথায় margin আর কোথায় Padding দিতে হবে টা সঠিক ভাবে বুঝতে পারব না । তাই আসুন এটি নিয়ে কিছুক্ষন আলোচনা করি ।
কোন অবজেক্ট যেমন ইমেজ টেক্সট প্যারাগ্রাফ এগুলো কে সাজানো গোছানোর জন্য প্রায় সময় ই margin এবং Padding ব্যবহার করতে হয় । যেমন
এখন যদি কোন ইমেজ এর সিএসএস এ এই উপরের কোড
টি লিখি তাহলে যা হবে টা হল এই যে ওই ইমেজ টি উপর থেকে ১০০ পিক্সেল নিচে ,
নিচ থেকে ১০০ পিক্সেল উপরে , বামে থেকে ৫০ পিক্সেল ডানে এবং ডান থেকে ৫০
পিক্সেল বামে সরে যাবে । অর্থাৎ কোন অবজেক্ট কে পুরাটাই ডানে বামে উপরে
নিচে সরাতে চাইলে margin ব্যবহার করা হয় ।
এখানে ভাল করে লক্ষ করলেই বিষয় টা পরিস্কার হয়ে যাবে । দেখুন যে এটি একটি বক্স । এর ভিতরে কোন কনটেন্ট আছে । এখন যদি আপনি এর margin দেন তাহলে পুরা বক্স সহ কনটেন্ট টি ডানে বানে সরে যাবে । আর যদি Padding দেন তাহলে এটি বক্স ছাড়া শুধুমাত্র ভিতরের অংশ টুকু ডানে বানে সরে যাবে ।
নিচের উদাহরণটি খেয়াল করুন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
#abc{
width:500px;
height:200px;
background-color:#FF6600;
}
</style><html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
#abc{
width:500px;
height:200px;
background-color:#FF6600;
}
</head>
<body>
<div id=”abc”>
Welcome To Bangla Web Design.Here You can learn web design in bangla.
</div>
</body>
</html>
এটি আপনি রান করলে এরকম দেখাবে ।
এবার নিচের সিএসএস কোড টি যোগ করুন ।
margin-left:200px;
এবার রান করলে আপনি দেখতে পারছেন যে পুরা বক্স টি লেখাটি সহ বাম থেকে ডানে সরে গেছে ।
আপনি যদি margin-top:200px; দেন তাহলে উপর
থেকে নিচে ২০০ পিক্সেল সরে যাবে বক্স সহ । এখন যদি margin-left:200px; এর
জায়গায় padding-left:200px; দেন এবং রান করেন তাহলে দেখতে পাবেন এরকম।
এখানে আপনি দেখতে পাচ্ছেন যে শুধুমাত্র
Welcome To Bangla Web Design.Here You can learn web design in bangla. এই
লেখাটি বাম থেকে ডানে সরে গেছে কিন্তু বক্স টি টার নিজের জায়গায় রয়ে গেছে ।
এবার নিশ্চয় বুঝতে পেরেছেন কোনটার কি কাজ । ধন্যবাদ ।
একটা বিষয় সবসময় মনে রাখবেন যে padding-left
ব্যবহার করলে যতখানি দিবেন ততখানি width কমে দিবেন । আর padding-top
ব্যবহার করলে এর height ততখানি কমে দিবেন ।
No comments:
Post a Comment