UICollectionView
spacing
margins
iOS development
Swift programming

UICollectionView spacing margins

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

UICollectionView spacing and margins are controlled by several different knobs, and they are easy to confuse because they operate at different layout levels. The important distinction is between spacing between items, spacing between lines, section insets around a section, and content insets around the whole scrollable area.

Core Sections

The main flow-layout properties

If you are using UICollectionViewFlowLayout, the most common spacing settings are:

  • 'minimumInteritemSpacing'
  • 'minimumLineSpacing'
  • 'sectionInset'
swift
1import UIKit
2
3let layout = UICollectionViewFlowLayout()
4layout.itemSize = CGSize(width: 100, height: 100)
5layout.minimumInteritemSpacing = 12
6layout.minimumLineSpacing = 16
7layout.sectionInset = UIEdgeInsets(top: 20, left: 16, bottom: 20, right: 16)

Those settings do different jobs. Inter-item spacing is the gap between items in the same row. Line spacing is the gap between rows in a vertically scrolling layout.

Section inset versus content inset

sectionInset belongs to the layout. It adds padding around items inside a section.

contentInset belongs to the collection view's scroll view behavior. It adds padding around the entire scrollable content area.

swift
collectionView.contentInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)

Use section insets when you are controlling layout structure. Use content inset when you want scrollable padding relative to the edges of the collection view itself.

Delegate methods can override layout values

If your view controller conforms to UICollectionViewDelegateFlowLayout, its delegate methods can override the layout's default spacing values.

swift
1extension ViewController: UICollectionViewDelegateFlowLayout {
2    func collectionView(_ collectionView: UICollectionView,
3                        layout collectionViewLayout: UICollectionViewLayout,
4                        minimumLineSpacingForSectionAt section: Int) -> CGFloat {
5        return 20
6    }
7
8    func collectionView(_ collectionView: UICollectionView,
9                        layout collectionViewLayout: UICollectionViewLayout,
10                        insetForSectionAt section: Int) -> UIEdgeInsets {
11        return UIEdgeInsets(top: 10, left: 24, bottom: 10, right: 24)
12    }
13}

If your spacing settings seem ignored, check whether delegate methods are taking precedence.

Item size affects visible spacing too

Spacing problems are often really sizing problems. If the item width plus inter-item spacing plus section insets cannot fit neatly into the available width, the flow layout may adjust placement in ways that make the gaps look inconsistent.

That is why good collection-view spacing often comes from balancing all of these together:

  • item size
  • collection width
  • section inset
  • inter-item spacing

Spacing is not independent of geometry.

Self-sizing cells and custom layouts

If you use self-sizing cells or a custom UICollectionViewLayout, the simple flow-layout spacing properties may no longer be the whole story. In those cases, spacing can also emerge from Auto Layout constraints inside the cell, estimated sizing behavior, or custom frame calculations in the layout object itself.

That is why spacing bugs in collection views sometimes survive even after changing minimumInteritemSpacing and sectionInset: the real source may be the layout class or the cell's own constraints rather than the visible flow-layout settings.

Testing on multiple device widths is usually the fastest way to catch spacing assumptions that only work on one screen size.

Common Pitfalls

  • Confusing minimumInteritemSpacing with minimumLineSpacing and tuning the wrong property.
  • Using contentInset when the real requirement is section-level padding through sectionInset.
  • Forgetting that delegate flow-layout methods override the layout object's default values.
  • Treating uneven spacing as a spacing bug when item width and available screen width are the real problem.
  • Hard-coding values without testing on different device widths and orientations.

Summary

  • In a flow layout, spacing and margins come from several different properties.
  • 'minimumInteritemSpacing controls gaps between items in a row.'
  • 'minimumLineSpacing controls gaps between rows.'
  • 'sectionInset and contentInset solve different padding problems.'
  • Always consider item size and delegate overrides when spacing looks wrong.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.