Padding and child-gap helpers.

Emerge layouts are spaced with padding and spacing rather than margins.

Use:

• padding/1, padding_xy/2, and padding_each/4 to add inner space between an element frame and its content
• spacing/1 and spacing_xy/2 to add gaps between children in layout containers
• space_evenly/0 to turn the remaining room in a row or column into equal gaps between children

Padding

Padding lives inside the element. It pushes content and child layout inward from the element edges.

This is the usual way to create gutters inside cards, buttons, pills, and panels. Padding works together with helpers such as Emerge.UI.Background and Emerge.UI.Border when you want the frame to remain visible around the content.

Child Gaps

Spacing lives between siblings, not around the outside of a container. In Emerge there are no margins, so container padding creates the outer gutter while spacing separates the items inside it.

spacing/1 applies the same gap everywhere the layout kind consumes spacing. spacing_xy/2 lets layouts consume horizontal and vertical gaps separately.

Layout Behavior

Layout containers consume spacing like this:

• row/2 uses horizontal spacing
• column/2 and text_column/2 use vertical spacing
• wrapped_row/2 uses horizontal spacing within each line and vertical spacing between wrapped lines

Wrapped rows also measure each line from the resolved child frames on that line. If a child grows taller after reflow, the line height and total wrapped row height grow with it, and later siblings are pushed down accordingly.

Even Distribution

space_evenly/0 is for rows and columns with definite room on their main axis.

• on row/2, the row needs definite width, such as width(px(...)) or width(fill()) inside a bounded parent
• on column/2, the column needs definite height, such as height(px(...)) or height(fill()) inside a bounded parent
• when active, space_evenly/0 derives equal gaps from the remaining room between children
• it does not add extra gap before the first child or after the last child
• it replaces fixed main-axis spacing while active, so spacing/1 or spacing_xy/2 no longer controls those gaps

Examples

Padding creates inner gutters:

el(
  [
    width(px(360)),
    padding_xy(16, 12),
    Background.color(color(:slate, 900)),
    Border.rounded(12),
    Font.color(color(:slate, 50))
  ],
  row([width(fill()), spacing(12), center_y()], [
    el(
      [
        padding_each(4, 8, 4, 8),
        Background.color(color(:slate, 100)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.size(12),
        Font.color(color(:slate, 800))
      ],
      text("Stable")
    ),
    column([spacing(4)], [
      el([Font.color(color(:slate, 50))], text("Release branch")),
      el(
        [Font.size(12), Font.color(color(:slate, 300))],
        text("Padding creates the card gutter")
      )
    ])
  ])
)

spacing_xy/2 separates wrapped content in both axes:

wrapped_row(
  [
    width(px(320)),
    padding(12),
    spacing_xy(10, 12),
    Background.color(color(:slate, 900)),
    Border.rounded(12)
  ],
  [
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Docs")
    ),
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Layout")
    ),
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Nearby")
    ),
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Animation")
    ),
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Input")
    ),
    el(
      [
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Scroll")
    )
  ]
)

space_evenly/0 turns remaining width into equal gaps between children:

row(
  [
    width(px(360)),
    height(fill()),
    padding(12),
    space_evenly(),
    Background.color(color(:slate, 900)),
    Border.rounded(12)
  ],
  [
    Input.button(
      [
        padding_xy(12, 8),
        Background.color(color(:slate, 50)),
        Border.rounded(8),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Back")
    ),
    Input.button(
      [
        padding_xy(12, 8),
        Background.color(color(:slate, 100)),
        Border.rounded(8),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Review")
    ),
    Input.button(
      [
        padding_xy(12, 8),
        Background.color(color(:slate, 50)),
        Border.rounded(8),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Ship")
    )
  ]
)