Inspect the working example
The line uses 16px monospace text with 32px line-height. A32px inline-block tile is bottom-aligned. Its bottom meets the line-box bottom in this fixed specimen.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Tile | Measure width/height | 32×32px |
| Bottom gap | Parent bottom minus tile bottom | Approximately 0px within layout tolerance |
| Baseline contrast | Restore baseline alignment | Descender space produces a positive bottom gap, measured per engine |
Follow the browser mechanism
Inline boxes participate in a line box and align relative to its baseline by default. Font ascender/descender metrics influence the space below. bottom chooses a different alignment target. Exact baseline-gap pixels are observed per engine, not claimed as a universal constant.
Default baseline alignment leaves font-dependent space
The alternative removes vertical-align:bottom while keeping the tile and line sizes.
<style>body{margin:8px}</style>
<style>.line{font:16px/32px monospace;background:#e3efe8}.tile{display:inline-block;width:32px;height:32px;background:#23715d}</style><p class="line"><span class="tile"></span></p>The measured parent bottom is below the tile bottom. Changing parent margins alone does not address that inline baseline relationship.
Try the repair
Should the lesson promise an identical 7px baseline gap on all engines?
Show the worked answer
No. Record the actual positive gap and font metrics for each engine; verify the zero bottom-alignment gap separately.
- Compare measured bottoms, not just the colored areas.
- Keep font/line-height assumptions attached to the result.