demo · v138

stretch keyword

Toggle between width: auto, width: 100%, and width: stretch on a child with a 12px margin. Watch how stretch sizes the margin box — not the content box — so the margins are preserved while the element still fills its parent.

checking support…
child (margin: 12px)
parent inner width: —px · child rendered width: —px · child right edge - parent right edge: —px

the code

.parent { padding: 0; }
.child {
  margin: 12px;
  /* width: 100% would overflow because it sizes the content box,
     ignoring the margin. */
  width: stretch; /* fills available space, margin-aware */
}

see also