Spacing

padding insets a node's children from its border, and margin keeps space around the node, between it and its siblings or its parent's edge. Both take a four-sided value and default to 0. To space a container's children evenly, use gap on the container instead (see Flexbox).

#Usage

<node style={{ flexDirection: "row", padding: 16, gap: 8 }}>
  <node style={{ width: 36, height: 36, backgroundColor: "#7aa2f7" }} />
  <node
    style={{
      width: 36,
      height: 36,
      margin: { left: "auto" },
      backgroundColor: "#9ece6a",
    }}
  />
</node>

The second box's "auto" left margin takes all the free space in the row, which pushes it to the far end.

#Values

Each key takes the Rect forms described in Units:

const all: BevyStyle = { padding: 12 };
const shorthand: BevyStyle = { padding: "8px 16px" }; // vertical, horizontal
const axes: BevyStyle = { padding: { horizontal: 24, vertical: 8 } };
const sides: BevyStyle = { margin: { top: 4, left: 24 } }; // the rest 0

• A percentage on any side, vertical sides included, is of the parent's width, as in CSS.
• A per-side object sets the sides it omits to 0, and the value always replaces the whole rect. A hoverStyle with padding: { left: 20 } zeroes the other three sides while hovered; repeat them in the overlay to keep them.

#Padding

• Padding sits inside the border, and the background paints under it. Children lay out in the content box that remains.
• With the default boxSizing: "borderBox", padding counts toward the node's width and height; with "contentBox" it is added to them (see Sizing).
• "auto" padding is 0.

#Margin

• Margin sits outside the border and paints nothing.
• An "auto" margin absorbs free space in a flex or grid container: margin: { left: "auto" } pushes an item to the end of its row, and margin: "auto" centers it on both axes. On an absolute node between opposite insets, "auto" margins center it (see Positioning).
• A negative margin pulls the node, and everything laid out after it, closer.
• Adjacent margins never collapse in flex and grid layouts: two 8px margins make 16px.

The node's border width is the third layer of the box, between padding and margin; see Borders.

#Animating

margin and padding take no { animated } binding and have no transition channel: a change applies at once. To ease the movement it causes, put transition: { layout } on the nodes that move (see Style transitions), or animate a spacer's size or the container's gap instead.

See margin and padding in the style reference.