CSS Layout Basics

Padding and margin both create space around an element, but they serve different purposes and behave differently within the box model.

Padding is the space between an element's content and its border. It is interior spacing:

• It is part of the element's clickable/interactive area.
• It is covered by the element's background color or image.
• It cannot be negative.
• It does not collapse — two adjacent elements' paddings always add up.

Margin is the space outside the element's border. It is exterior spacing used to push elements apart from their neighbors:

• It is always transparent (never covered by background).
• It can be negative — negative margins pull elements closer together or even overlap them.
• Vertical margins between block-level elements collapse (the larger margin wins).
• margin: auto on a block element with a set width centers it horizontally; it is also used in flexbox/grid for auto-fill remaining space.

When to use each:

Use padding when you need space inside a component — for example, giving a button breathing room around its text, or spacing content away from a card's edge. The background and border encompass the padding, so it stays visually part of the element.

Use margin when you need space between two separate components — for example, vertical rhythm between paragraphs, or gaps between cards in a list. Margin affects how elements are separated from each other in the layout flow.

Key behavioral differences:

• In flex and grid containers, margin: auto absorbs all available free space in the relevant axis, which is a powerful centering and distribution technique.
• Margins collapse between adjacent block boxes in normal flow; padding never collapses.
• Percentage padding and margin values are always calculated relative to the parent element's width — including vertical padding. This is how the intrinsic aspect-ratio padding hack worked before aspect-ratio was supported natively.
• box-sizing: border-box makes width/height include padding and border, but never margin. Margin is always additive.

The gap property in flex/grid: In modern layouts, gap (formerly grid-gap) is preferred over margins for spacing between flex or grid items. It is more predictable, does not add space at the outer edges, and is easier to reason about than individual item margins.

Centering is one of the most frequently asked CSS interview topics. In 2026, there are several solid approaches — the right one depends on context.

1. Flexbox (recommended for most cases):

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 100vh;       /* ensure the container has height */
}

Works for any child element, handles wrapping, and is easy to extend. No knowledge of the child's dimensions required.

2. CSS Grid with place-items:

.container {
  display: grid;
  place-items: center; /* shorthand for align-items + justify-items */
  min-height: 100vh;
}

place-items: center is the most concise centering solution available. Also works with place-content: center when centering multiple items as a group.

3. Absolute positioning with transform:

.container { position: relative; }
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Useful when the element must be removed from normal flow or overlaid. Works without knowing the element's dimensions. A common gotcha: the containing block must have position set to anything other than static.

4. Absolute positioning with inset: 0 and margin: auto:

.container { position: relative; }
.element {
  position: absolute;
  inset: 0;        /* shorthand for top/right/bottom/left: 0 */
  margin: auto;
  width: fit-content;
  height: fit-content;
}

Requires the element to have explicit or intrinsic dimensions. Clean and readable with modern inset shorthand.

5. Centering text horizontally:

.element {
  text-align: center;
}

Only centers inline content (text, inline elements) within the block — does not center the block element itself.

6. Block-level horizontal centering:

.element {
  width: 800px;   /* or max-width */
  margin: 0 auto;
}

Classic pattern for page containers. Only works horizontally; does not vertically center.

Common interview gotchas:

• margin: auto only works horizontally for block elements in normal flow. In flex/grid, it works in both axes and absorbs all available free space.
• The transform approach centers visually but the layout position (top/left: 50%) still takes up space in the stacking context.
• For vertically centering single-line text within a box, line-height equal to the element's height is an old trick but fragile — prefer flexbox.
• place-items is a shorthand for align-items and justify-items — knowing the difference between justify-items (for grid) and justify-content (for both) is a common follow-up question.

The position property controls how an element is positioned in the document and whether it participates in normal document flow. There are five values:

static (default): The element is placed according to normal document flow. top, right, bottom, and left have no effect. This is the default for every element.

relative: The element stays in normal flow (occupies its original space), but can be offset using top, right, bottom, left relative to where it would normally appear. It also establishes a containing block for absolutely positioned descendants.

absolute: The element is removed from normal flow (no space reserved for it). It is positioned relative to its nearest ancestor with a position other than static (the containing block). If none exists, it positions relative to the initial containing block (the viewport). Use top, right, bottom, left to place it.

fixed: Like absolute but positioned relative to the viewport, not any ancestor. It stays in place during scrolling. Common for sticky navbars, modals, and floating buttons. One gotcha: a parent with transform, filter, or perspective applied turns that parent into the containing block for fixed children, breaking the fixed behavior.

sticky: A hybrid. The element behaves as relative until it reaches a defined scroll threshold, then it becomes fixed within its scroll container. The element still occupies space in normal flow.

sticky only works if the containing element has overflow that allows scrolling and the element is not at the very edge of the scroll container. The top, right, bottom, or left value is required to specify when it sticks.

Stacking context and z-index: Positioned elements (any value other than static) can use z-index to control stacking order. A higher z-index appears on top of a lower one, but only within the same stacking context. Elements that create their own stacking context (via transform, opacity < 1, filter, will-change, isolation: isolate, etc.) are compared as a unit against sibling stacking contexts, regardless of their internal z-index values. This is the root cause of most z-index debugging headaches.

Common interview gotchas:

• position: absolute without a positioned ancestor will position the element relative to the document root, often an unintended result. Always pair it with position: relative on the parent.
• z-index only works on positioned elements — setting z-index on a static element has no effect.
• position: sticky silently fails if any ancestor has overflow: hidden or overflow: auto, because the element has no scroll container to stick within.
• position: fixed breaks inside a transformed ancestor — a known "bug" that is actually per-spec behavior.