A stupid little CSS trick I’ve been using lately is setting an element’s size to 0 so its content happily overflows but doesn’t affect the layout.

For example, set each tick’s width to 0 so the width of the line + label doesn’t throw off placement with respect to the axis:

Without specifiying `width: 0` , the width of the tick label is taken into account when positioning the ticks realtive to the parent.

0
600
1200
1800
2400
3000

Setting `width: 0` ensures that the tick itself is infinitesimally small (just like a point in math!), and the tick line and label are centered beneath that point.

0
600
1200
1800
2400
3000

A more real-world example using 0-width containers for the meter label and axis ticks:

Audio
0 dB
-12
-24
-36
-48
-60