এই ম্যানুয়ালটি আপনাকে দুটি লিঙ্কের মধ্যে স্থান তৈরি করার পদ্ধতি শেখাবে।
চল শুরু করি!
এইচটিএমএল এবং সিএসএসে দুটি লিঙ্কের মধ্যে কীভাবে স্থান দেওয়া যায়?
দুটি লিঙ্কের মধ্যে স্থান দেওয়ার জন্য, প্রথমে, HTML ফাইলে প্রয়োজনীয় লিঙ্কগুলি যোগ করুন।
ধাপ 1: HTML এ লিঙ্ক যোগ করুন
HTML-এ, আমরা
এইচটিএমএল
< div >< ক href = 'https://linuxhint.com/create-html-file/' > কিভাবে একটি HTML ফাইল তৈরি করবেন? < / ক >
< ক href = 'https://linuxhint.com/edit-html-file/' > কিভাবে একটি HTML ফাইল সম্পাদনা করবেন? < / ক >
< / div >
নিম্নলিখিত চিত্রটি দেখায় যে লিঙ্কগুলি সফলভাবে যোগ করা হয়েছে:
ধাপ 2: Div এবং লিঙ্ক স্টাইল করুন
এই ধাপে, div স্টাইল করুন এবং লিঙ্ক ব্যবহার করে “ div 'সিএসএস-এ। আমরা প্যাডিং সামঞ্জস্য করব ' 40px এবং লিঙ্কগুলির ফন্ট সাইজ হিসাবে সেট করুন বড় ', ডিভের উচ্চতা ' হিসাবে সেট করা হয়েছে 150px ” এবং ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করুন এবং ডিভ এর কালার সেট করুন “ কালো ” এর পরে, সীমানা প্রস্থকে ' হিসাবে সামঞ্জস্য করুন 5px ', স্টাইল হিসাবে ' ড্যাশড 'এবং রঙ' হিসাবে rgb(251, 255, 0) ”
সিএসএস
div {প্যাডিং : 40px ;
অক্ষরের আকার : বড় ;
উচ্চতা : 150px ;
পটভূমি : কালো ;
সীমান্ত : 5px ড্যাশড rgb ( 251 , 255 , 0 ) ;
}
উপরের কোড ব্যবহার করে, নিম্নলিখিত আউটপুট পাওয়া যায়। আপনি দেখতে পাচ্ছেন, ডিভ এবং লিঙ্ক উভয়ই স্টাইল করা হয়েছে:
ধাপ 3: অনুভূমিকভাবে দুটি লিঙ্কের মধ্যে স্থান দিন
আমরা HTML এবং CSS ব্যবহার করে অনুভূমিকভাবে দুটি লিঙ্কের মধ্যে স্থান দিতে পারি। এখানে, আমরা উভয় পদ্ধতি একে একে ব্যাখ্যা করব।
পদ্ধতি 1: HTML ব্যবহার করা
কোন বাহ্যিক CSS না লিখে লিঙ্কগুলির মধ্যে স্থান দিতে, আপনি ব্যবহার করতে পারেন “ HTML-এ যেখানে আপনি স্থান তৈরি করতে চান। ' ” মানে অ-ব্রেকিং স্পেস। HTML ফাইলে, এক যোগ করার অর্থ হল একটি স্থান। আপনি যদি আরও স্পেস দিতে চান, তাহলে প্রয়োজনীয় সংখ্যক স্পেস অনুযায়ী ম্যানুয়ালি যোগ করা বাঞ্ছনীয় নয়।
উল্লিখিত ধারণাটি বোঝার জন্য উদাহরণে যাওয়া যাক!
উদাহরণ
এখানে, আমরা চারবার লিখব ' প্রথম লিঙ্কের পরে এমনভাবে স্পেস তৈরি করতে হবে যাতে চারটি স্পেসের পরে দ্বিতীয় লিঙ্কটি উপস্থিত হবে।
এইচটিএমএল
< div >< ক href = 'https://linuxhint.com/create-html-file/' > কিভাবে একটি HTML ফাইল তৈরি করবেন? < / ক >
কিভাবে একটি HTML ফাইল সম্পাদনা করবেন?
আপনি দেখতে পাচ্ছেন, প্রথম লিঙ্কের ডানদিকে স্পেস তৈরি করা হয়েছে:
পদ্ধতি 2: CSS ব্যবহার করা
CSS-এ, আমরা ব্যবহার করব ' মার্জিন-ডান দুটি লিঙ্কের মধ্যে স্থান দিতে সম্পত্তি। দ্য ' মার্জিন-ডান উপাদানটির ডান দিক থেকে স্থান যোগ করতে সম্পত্তি ব্যবহার করা হয়। আপনি এটির জন্য নেতিবাচক মানগুলিও সেট করতে পারেন।
বাক্য গঠন
মার্জিন-রাইট সম্পত্তির সিনট্যাক্স নীচে দেওয়া হল:
মার্জিন-ডান : মানপরিবর্তে ' মান ”, এলিমেন্টের ডান দিক থেকে মার্জিন সেট করুন। আসুন উদাহরণটি চালিয়ে যাই।
উদাহরণ
এখানে, আমরা ব্যবহার করব ' ক HTML এ আমরা যে লিঙ্কটি তৈরি করেছি তা অ্যাক্সেস করতে। এর পরে, মার্জিন-রাইট সম্পত্তির মান ' হিসাবে সেট করুন 50px ”:
ক {মার্জিন-ডান : 50px ;
}
প্রথম লিঙ্কের ডান দিক থেকে স্থান তৈরি করা হয়েছে, যা নীচে দেখা যাবে:
ধাপ 4: উল্লম্বভাবে দুটি লিঙ্কের মধ্যে স্থান দিন
দুটি লিঙ্কের মধ্যে উল্লম্ব স্থান দিতে, প্রথমে উল্লম্ব আকারে লিঙ্কগুলি সারিবদ্ধ করুন। এটি ব্যবহার করে করা হবে ' ব্লক 'এর মান' প্রদর্শন ' সম্পত্তি এবং তারপর ব্যবহার করে ' লাইনের উচ্চতা দুটি লিঙ্ক লাইনের মধ্যে স্থান দিতে সম্পত্তি।
উদাহরণ:
এখানে, আমরা ডিসপ্লে প্রপার্টির মান সেট করব “ ব্লক লিঙ্কগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে। তারপর, লাইন-উচ্চতা সম্পত্তির মান হিসাবে সেট করে দুটি লিঙ্কের মধ্যে স্থান দিন। 80px ”:
ক {প্রদর্শন : ব্লক ;
লাইনের উচ্চতা : 80px ;
}
আপনি দেখতে পাচ্ছেন, লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করে স্থানটি তৈরি করা হয়েছে:
এটাই! আমরা HTML এবং CSS এ দুটি লিঙ্কের মধ্যে স্থান দেওয়ার পদ্ধতি ব্যাখ্যা করেছি।
উপসংহার
দ্য ' ', ' মার্জিন-ডান ', এবং ' লাইনের উচ্চতা CSS এর বৈশিষ্ট্য দুটি লিঙ্কের মধ্যে অনুভূমিক এবং উল্লম্ব স্থান দিতে ব্যবহৃত হয়। এটি ব্যবহার করে, আপনি লিঙ্কগুলির ডান এবং বাম দিক থেকে স্থান সামঞ্জস্য করতে পারেন। এই নিবন্ধে, আমরা দুটি ভিন্ন পদ্ধতি ব্যবহার করে দুটি লিঙ্কের মধ্যে স্থান দেওয়ার পদ্ধতিটি ব্যাখ্যা করেছি এবং সম্পর্কিত উদাহরণ প্রদান করেছি।