CSS Course in Bengali, Chapter-3
CHAPTER - 3
Margin, Border, Padding & Content
3.1 ভূমিকা : Web Page -এ যে কোনো জিনিসই তার কিছু নির্দিষ্ট জায়গা জুড়ে অবস্থান করে। সেখানে একটি box তৈরি হয়।
চিত্র: box model
margin
border
padding
content
padding
border
margin
3.1.1 Margin : আমরা যখন কোন কাগজে বা খাতায় লিখি তখন পৃষ্ঠার একদম সাইড থেকে লিখিনা। তার থেকে চারিদিকে কিছুটা অংশ ফাঁকা রেখে লেখা শুরু করি বা মার্জিন (দাগ) টেনে তার ভিতরে লেখাগুলি লিখি। দাগের বাইরে বা দাগ থেকে পৃষ্ঠার অন্তিম পর্যন্ত অংশটি হলো মার্জিন (margin) অংশ।
উপরের ছবিতে লাল রংয়ের জায়গাটি হল মার্জিন অংশ।
3.1.2 Border : খাতায় লেখার সময় পৃষ্ঠার চারিদিকে স্কেল দিয়ে দাগ দিয়ে থাকি। সেই দাগটি হলো বর্ডার (border) ।
উপরের ছবিতে বেগুনি রংয়ের জায়গা বা মোটা লাইনটি হল border অংশ।
3.1.3 Padding : border বা দাগ টানার পর border কে touch করে লেখা শুরু করি না। তার থেকে কিছুটা অংশ ফাঁকা রেখে লেখা শুরু করি। এই ফাঁকা অংশটি হলো প্যাডিং (padding) অংশ।
উপরের ছবিতে নীল রংয়ের জায়গাটি হল padding অংশ।
3.1.4 Content : শুধুমাত্র যে অংশটুকুতে লেখা হয় সেটি হল কনটেন্ট (content)।
উপরের ছবিতে হলুদ রঙের জায়গাটি হল কনটেন্ট (content) এর জায়গা।
3.2 নিয়ম : box-model এর মধ্যে আমাদের মূল জিনিস হলো কোনো ছবি (image) বা টেক্সট (text)। Text হল content. Content থেকে border, border থেকে বাইরের অংশ ও border এর চাওরা, এগুলিকে আমারা নির্দিষ্ট সাইজ (size) দিয়ে তাদের দূরত্ব বা চাওড়া ঠিক করতে পারি। এর জন্য আমাদের px, em, rem, vw দিতে হবে।
3.2.1 Margin
p { margin : 10px ; }
.para{ margin : 5vw;}
#box{ margin : 20em;}
এভাবে আমরা কোন বক্স মডেল কে সিলেক্ট (selector) করে নিজের ইচ্ছেমতো মার্জিন দিতে পারি।
উপরের ছবি অনুসারে কোডিং এর সাইজ অনুযায়ী লাল জায়গার চাওরাটি কমবেশি হবে।
3.2.2 Padding
p { padding : 5px ; }
উপরের ছবি অনুসারে padding টি 5 pixel দূরত্ব বজায় রেখে লাল জায়গাটি চাওরা হবে।
3.2.3 Border
p { border : 3px ; }
বর্ডার 3 pixel মোটা হবে। উপরের ছবি অনুসারে বেগুনি রঙের জায়গাটি মোটা পাতলা হবে।
3.3 Example :
Html code
<content class="content">
<div class="one">Hello World</div>
</content>
<content class="content">
<div class="two">Hello World</div>
</content>
<content class="content">
<div class="three">Hello World</div>
</content>
<content class="content">
<div class="four">Hello World</div>
</content>
Css code
content{
width: 80vw;
border: 2px solid black;
}
.one{
margin: 10px;
}
.two{
padding: 20px;
}
.three{
border: 5px solid #CABAFF;
}
Output :
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন