CSS-এ টাইলসের জন্য উল্লম্ব মার্জিন

এখন আসুন উল্লম্ব মার্জিন যোগ করি। এটি করতে, সমস্ত চাইল্ড এলিমেন্টে margin-bottom প্রপার্টি সেট করুন 10px মান সহ:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

আমরা দেখতে পাচ্ছি, শেষ সারিটি প্যারেন্ট থেকে মার্জিন করা বাদ দিয়ে সবকিছু ভালভাবে কাজ করছে। বেশিরভাগ ক্ষেত্রেই এটি গুরুত্বপূর্ণ নয়।

প্রতি সারিতে দুটি এলিমেন্ট সহ একটি টাইল লেআউট তৈরি করুন যেখানে এলিমেন্টগুলির মধ্যে দূরত্ব 20px হবে।

প্রতি সারিতে তিনটি এলিমেন্ট সহ একটি টাইল লেআউট তৈরি করুন যেখানে এলিমেন্টগুলির মধ্যে দূরত্ব 20px হবে।

প্রতি সারিতে চারটি এলিমেন্ট সহ একটি টাইল লেআউট তৈরি করুন যেখানে এলিমেন্টগুলির মধ্যে দূরত্ব 20px হবে।