ওয়েব ডিজাইন CSS Part-7(Margin And Padding)

Related Articles

মঙ্গলে জনবসতি গড়ে তোলা বুদ্ধিমানের কাজ নয়

May 31, 2018

ফসিলাইজড খুশকির মাধ্যমে বিবর্তিত বর্তমান প্রাণীর অবস্থান

May 26, 2018

ডার্ক ম্যাটার ও আমাদের সম্প্রসারণশীল বিশ্ব

May 16, 2018

Margin And Padding:

Padding:

Padding হচ্ছে HTML এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। বর্ডার থেকে কনটেন্ট এর  চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য padding ব্যবহার করা হয। padding মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। যেমন-

border : 2px solid #fff;
padding : 10px;

padding : 10px; দেয়াতে এলিমেন্টের চারিদিকে 10px করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন-

padding-top : 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;

এভাবে চারবার লেখার কাজ একবারে করা যায়,যেমন-

padding : 5px;
অথবা
padding : 5px 8px 5px 4px;

এখানে ঘরির কাটার মত করে হিসেব করে বের করতে হয় যেমন top 5px এরপর right 8px তারপর bottom 5px  এবং সবশেষে left 4px ।
padding : 10px 4px; হলে top and bottom 10px এবং left and right 4px  করে padding হবে।

width and  padding:

যেমন কোন এলিমেন্টের width : 100px; আছে এবং এখানে padding : 10px; আছে, তাহলে শেষ পর্যন্ত এলিমেন্টের width হয়ে যাবে 120px  (left and right )। এই সমস্যার জন্য যদি box-sizing : border-box; ব্যবহার করেন তবে আসল width ফেরত আসবে।

Margin

বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়।এজন্য CSS এ margin Property ব্যবহার করা হয়।মান দেয়ার নিয়ম padding এর মতই শুধু এখানে অতিরিক্ত একটা মান auto দেয়া যায়।
কোথাও মান auto দিলে ব্রাউজার হিসেব করে একটা মান নিয়ে নেয়।
কোন এলিমেন্টকে যদি div এর মাঝে আনতে হয় তবে সেখানে দুটি প্রোপার্টিজ দিয়ে করা যায়। মার্জিন margin : 0 auto; দেন এবং width নির্দিষ্ট করে দেন। সেটার parent div এর ঠিক মাঝামাঝি চলে আসবে (আড়াঅাড়ি ভাবে)। যদি কোন div এর ভিতর না থাকে তবে ব্রাউজারের মাঝে চলে আসবে।

margin: 5px 8px 5px 4px;

প্যাডিং এর মত এখানে width যোগ হয়না।