Skip to content
Daily learningWeb Development

CSS-এ `gap` কেন `margin`-এর চেয়ে ভালো

শেষ আইটেমের বাড়তি ফাঁকা জায়গার সমস্যাটা আর থাকে না।

2 min
Share

আইটেমের মাঝে ফাঁক দিতে অনেকে এখনো margin-right বা margin-bottom ব্যবহার করেন। সমস্যা হলো শেষ আইটেমেও মার্জিন বসে যায়, তাই :last-child দিয়ে সেটা আবার মুছতে হয়:

.item {
  margin-right: 16px;
}
.item:last-child {
  margin-right: 0;
}

gap শুধু আইটেমগুলোর মাঝে ফাঁক দেয়, বাইরে নয়:

.list {
  display: flex;
  gap: 16px;
}

দুই লাইন কম, আর র‍্যাপ হলেও ঠিক থাকে — মার্জিন দিয়ে করলে নতুন লাইনের উল্লম্ব ফাঁকটা আলাদা করে সামলাতে হতো।

gap এখন flexbox, grid আর multi-column — তিন জায়গাতেই কাজ করে।

One useful email a month

Design system patterns, front-end techniques and case study breakdowns. No promotions, no digest of other people's links.

Unsubscribe anytime. We never share your address.