ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে বর্ডার নিয়ে আলোচনা করেছিলাম। আজ তোমাদের মার্জিন এবং প্যাডিং নিয়ে আলোচনা করা হলো :
মার্জিন (Margin):
বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়।এজন্য CSS এ margin Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px; নিচের দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-bottom:25px; বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px; ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;।চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35px এখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।
প্যাডিং (Padding):
বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয। প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:20px; নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:25px; বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:30px; ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:35px;।চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding:20px 25px 30px 35px এখানে 20px উপরের দিকের প্যাডিং নির্দেশ করে, 25px ডান দিকের প্যাডিং নির্দেশ করে, 30px নিচের দিকের প্যাডিং নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।
মার্জিন (Margin):
বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়।এজন্য CSS এ margin Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px; নিচের দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-bottom:25px; বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px; ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;।চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35px এখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।
বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয। প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:20px; নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:25px; বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:30px; ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:35px;।চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding:20px 25px 30px 35px এখানে 20px উপরের দিকের প্যাডিং নির্দেশ করে, 25px ডান দিকের প্যাডিং নির্দেশ করে, 30px নিচের দিকের প্যাডিং নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।
অনুশীলন প্রজেক্ট:
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
h3,div{border-style:solid; border-color:rgb(240,060,155);}
#auto{
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
h3,div{border-style:solid; border-color:rgb(240,060,155);}
#auto{
margin-left:auto;
padding-left:auto;
}
#px{
#px{
margin-left:50px;
padding-left:50px;
}
#cm{
#cm{
margin-left:3cm;
padding-left:3cm;
}
#pt{
#pt{
margin-left:120pt;
padding-left:120pt;
}
#per{
#per{
margin-left:25%;
padding-left:25%;
}
div{
div{
margin:20px 25px 30px 35px;
padding:20px 25px 30px 35px;
}
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left margin.</h3>
<h3 id="px">This is an example of 50px left margin.</h3>
<h3 id="cm">This is an example of 3cm left margin.</h3>
<h3 id="pt">This is an example of 120 pt left margin.</h3>
<h3 id="per">This is an example of 25% left margin.</h3>
<div>
<h2>This is an example of multi margin.</h2>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div> </body>
</html>
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left margin.</h3>
<h3 id="px">This is an example of 50px left margin.</h3>
<h3 id="cm">This is an example of 3cm left margin.</h3>
<h3 id="pt">This is an example of 120 pt left margin.</h3>
<h3 id="per">This is an example of 25% left margin.</h3>
<div>
<h2>This is an example of multi margin.</h2>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div> </body>
</html>
Tags
CSS