kf-g-css-spacing-gap-margin-rules

CSS spacing design rules

This skill returns spacing responsibility to the container side rather than child elements, and regular spacing is gap, structural whitespace is empty grid cells, andmargin is limited to exceptions. grid-template For the writing style and empty cell notation rules, prioritize ../kf-g-css-flex-grid/SKILL.md , and this skill focuses on separating spacing responsibility.

When to use this skill

• gap と margin When deciding which of these to use
• When reviewing whether whitespace between siblings may be accumulated with margin when reviewing whether it is acceptable to load with
• When deciding whether whitespace in the layout is expressed with gap, an empty cell, ormargin when deciding which of these to use to express it
• When considering whether spacing between grid or flex children can be returned to container responsibility
• When checking whether AI-generated CSS contains ad hoc margin-block-start や margin-inline-start when checking whether these are mixed in

First decisions

1. Is the spacing regular spacing within the same container?
2. Does the whitespace express the positional relationship itself in the layout?
3. Is the margin a responsibility inside the container, or a relationship with outside the container?
4. Can the existing structure be changed?

Basic policy

For regular spacing, gap

• For distances between child elements repeated within the same container, first use gap is used.
• grid と flex Do not express spacing between children of margin with
• between sibling elements. display: grid と gap For vertical stacks, prioritize
• if a shared container can be provided. margin-block-start や margin-inline-start Do not place the layout rhythm in the child-side

.stack {
  display: grid;
  gap: 0.75rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Structural whitespace is an empty grid cell

• Structural whitespace is an empty grid cellgap If the whitespace itself carries placement meaning, express it not with grid-template but with an empty cell on
• This applies to situations such as shifting only the heading, leaving an intentional blank column beside an image, and aligning the starting position of body text for each column.
• This applies to cases such as shifting only a heading, leaving an intentional whitespace column beside an image, or aligning the start position of body text by row.

.hero {
  display: grid;
  grid-template:
    "...   title" auto
    "media body " auto
    / 4rem 1fr;
}

margin Treat empty cells not as a substitute for margins but as part of the layout structure.

• margin is treated supplementarily
• margin Do not use gap as the primary means of internal layout.
• may be used only in situations that create a relationship with outside the container, or in exceptions where the existing structure cannot be changed and a container with margin cannot be prepared.
• Do not manage regular internal padding of a component with margin per child element.

margin Do not paper over structural offsets or position adjustments with

• on the element side.
• If you use
• margin limit its responsibility. gap Keep its use close to the component root or to connection points with external layout. margin If multiple child margins line up in a repeated pattern, review whether the responsibility can be returned to the container.

Common rewrites

margin Return the misalignment created with to empty cells

/* before */
.hero-title {
  margin-inline-start: 4rem;
}

/* after */
.hero {
  display: grid;
  grid-template:
    "...   title" auto
    "media body " auto
    / 4rem 1fr;
}

Checklist for AI output

• Regular spacing within the same container is margin not created with .
• Structural whitespace is margin や padding not being papered over with .
• gap Are and child margin being mixed, resulting in double spacing?
• margin Can the reason for keeping be explained as an external relationship or structural constraint?

Policy for output

• First, state clearly whether that spacing should be handled with gap, an empty cell, ormargin .
• If it is regular spacing, briefly explain why it should be returned to as a container responsibility. gap Briefly explain whether it should be returned to.
• If it is structural whitespace, explain why it should be represented with an empty cell rather than . margin Explain whether it should be represented by an empty cell instead of.
• margin If is allowed, state clearly that it is an exception and the reason for it.

Final check

• Is regular spacing between child elements expressed with gap ?
• Is structural whitespace expressed with empty cells?
• margin Is not being made the primary means of internal layout?
• margin If is kept, can the reason be explained as an external relationship or structural constraint?

References

• Promote spacing design using empty grid cells