Max plus min

The largest positive number plus the most negative one: max(0, positives) + min(0, negatives).

In CSS, margins of empty blocks that touch collapse into one: the largest positive margin plus the most negative one. Each number is an empty block’s top margin, between a 1000px block and a 1px block, so the stack’s height less 1001 is the collapsed margin; a query container in the same grid cell reads its height.

Example

Result

Markup

<div class="max-plus-min">
  <div>
    <i style="--value: 40"></i>
    <i style="--value: -15"></i>
    <i style="--value: 25"></i>
    <i style="--value: -30"></i>
  </div>
  <b><output></output></b>
</div>

CSS

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.max-plus-min output::after { counter-reset: result var(--result); content: counter(result); }
.max-plus-min { display: inline-grid; }
.max-plus-min > div { grid-area: 1 / 1; display: flow-root; }
.max-plus-min > div::before { content: ""; display: block; height: 1000px; }
.max-plus-min > div::after { content: ""; display: block; height: 1px; }
.max-plus-min > div > i { display: block; margin-top: calc(var(--value) * 1px); }
.max-plus-min > b { grid-area: 1 / 1; container-type: size; }
.max-plus-min > b > output { --result: calc(round(100cqh / 1px) - 1001); }
/* only shows the answer: clips the stack to its first line; align-content: start keeps the row the stack's height */
.max-plus-min { height: 1lh; overflow: hidden; align-content: start; }
.max-plus-min > div { width: 4em; }

Limits

empty blocks of height 0 with nothing between them: top or bottom padding or border, or a new formatting context, stops the collapse (left or right ones don’t)
numbers above −1000: the 1000px block above is the floor
a query container with container-type: size in the same grid cell, with no padding
the 1001 in the read is the two blocks’ heights added, 1000px + 1px: change them together
the row as tall as the stack: a grid held taller stretches its row, and the read with it (align-content: start here, under the grid’s shown height)
a whole-number answer: the read rounds to 1px
each answer under 1,000,000: from a million up, Chrome passes --result on as 1e+06, which counter-reset rejects, so the counter prints 0
no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

	Chrome	Safari	Firefox
Example	140	26	158

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158.