CSS-এ display প্রপার্টি নিয়ে কাজ

আপনি ইতিমধ্যেই জানেন যে সমস্ত ট্যাগ একটি নির্দিষ্ট ব্লক মডেলের অন্তর্গত। ইচ্ছা করলে, তবে, display প্রপার্টি ব্যবহার করে মডেলটি পরিবর্তন করা যেতে পারে। এই প্রপার্টির block মান ব্যবহার করে একটি এলিমেন্টকে ব্লক এলিমেন্ট বানানো যায়, এবং inline মান ব্যবহার করে - ইনলাইন বানানো যায়।

আসুন span ট্যাগগুলোকে ব্লক এলিমেন্টের মতো আচরণ করাই:

<span>text</span>
<span>text</span>
<span>text</span>

span {
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-bottom: 20px;
}

এবং এখন div ট্যাগগুলোকে ইনলাইনের মতো আচরণ করাই:

<div>text</div>
<div>text</div>
<div>text</div>

div {
	display: inline;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ধরুন আপনার HTML কোডে কয়েকটি প্যারাগ্রাফ আছে। সেগুলোকে ইনলাইন এলিমেন্টের মতো আচরণ করতে বানান।

ধরুন আপনার HTML কোডে কয়েকটি লিঙ্ক আছে। সেগুলোকে ব্লক এলিমেন্টের মতো আচরণ করতে বানান। তাদের জন্য বর্ডার, প্রস্থ এবং উচ্চতা সেট করুন।