Container & Margin Behavior Map

I keep forgetting where my spacing is actually coming from, so this is my attempt at tracing layout spacing. The short version: I have spacing applied in multiple layers (body, Container, and page-level overrides), and those layers stack unless I explicitly override them.

Where spacing is defined

layout-spacing-file-tree.txt

src/
├─ styles/
│  └─ GlobalStyles.tsx        # body padding-top (global, including media query)
├─ components/
│  └─ Primitives.tsx          # Container primitive margin-top + margin-bottom
└─ app/
   └─ projects/
      └─ page.tsx             # ProjectsContainer local override for this page only

Layer 1: Global body spacing

I apply base top spacing globally in GlobalStyles because the navbar is fixed.

src/styles/GlobalStyles.tsx

body: {
  // ...
  paddingTop: '4rem',
  '@media (max-width: 768px)': {
    paddingTop: '1rem',
  },
}

This means every page starts with global top offset unless a page layout changes body behavior (which mine currently does not).

Layer 2: Container primitive spacing

My Container primitive has both top and bottom margins baked in.

src/components/Primitives.tsx

export const Container = styled.div<{ size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' }>
  width: 100%;
  max-width: ...;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 24rem;
  padding: 0 ...;

So by default, pages using Container get:

• +4rem top margin from Container
• +24rem bottom margin from Container
• plus body top padding from global styles

Layer 3: Projects page local override

On my projects page, I override Container so the section can end tightly, while still restoring top breathing room on small screens.

src/app/projects/page.tsx

const ProjectsContainer = styled(Container)
  margin-top: 0;
  margin-bottom: 0;

  @media (max-width: 768px) {
    margin-top: 4rem;
  }
;

// usage
<ProjectsContainer size="lg">
  <ContentWrapper>
    ...
  </ContentWrapper>
</ProjectsContainer>

Computed behavior across the site

This is how spacing effectively resolves right now:

spacing-summary.txt

Most pages (using plain Container):
- Desktop: body padding-top 4rem + container margin-top 4rem = 8rem top spacing
- Mobile:  body padding-top 1rem + container margin-top 4rem = 5rem top spacing
- Bottom:  container margin-bottom 24rem

/projects page (using ProjectsContainer override):
- Desktop: body padding-top 4rem + container margin-top 0 = 4rem top spacing
- Mobile:  body padding-top 1rem + container margin-top 4rem = 5rem top spacing
- Bottom:  container margin-bottom 0

Why this felt confusing

• I had spacing at both the global body layer and the Container layer.
• I then added a page-level override on top of both.
• My mobile behavior differs globally and locally, so it looked inconsistent until mapped out.

Rules I follow now

Going forward, when spacing looks wrong, I check these in order:

• GlobalStyles.tsx body padding
• Primitives.tsx container margins
• Any local styled override on that route

If I keep this hierarchy clear, I can predict layout without trial-and-error.