Name: block-step-insert
	Value: margin | padding
	Initial: margin
	Applies to: block-level boxes
	Inherited: no
	Animatable: no
	Percentages: N/A
	Media: visual
	Computed Value: as specified
	

margin

Any extra space resulting from a 'block-step-size'-induced adjustment is inserted outside the box’s border, as extra margin.

padding

Any extra space resulting from a 'block-step-size'-induced adjustment is inserted inside the box’s border, as extra padding.

	Name: block-step-align
	Value: auto | center | start | end
	Initial: auto
	Applies to: block-level boxes
	Inherited: no
	Animatable: no
	Percentages: N/A
	Media: visual
	Computed Value: as specified
	

auto

If 'block-step-insert' is ''margin'': if 'align-self' is ''start'', ''end'', or ''center'', treat as that value, otherwise treat as ''center''.

center

Any extra space resulting from a 'block-step-size'-induced adjustment is split, and applied half on either side of the box.

start

Any extra space resulting from a 'block-step-size'-induced adjustment is inserted on the end side of the box.

end

Any extra space resulting from a 'block-step-size'-induced adjustment is inserted on the start side of the box.

	Name: block-step-round
	Value: up | down | nearest
	Initial: up
	Applies to: block-level boxes
	Inherited: no
	Animatable: no
	Percentages: N/A
	Media: visual
	Computed Value: as specified
	

up

The outer size of the box is increased (positive space is inserted) to fulfill the 'block-step-size' constraint.

down

The outer size of the box is decreased (negative space is inserted) to fulfill the 'block-step-size' constraint.

nearest

The outer size of the box is either increased (as for ''up'') or decreased (as for ''down''-- whichever results in the smallest absolute change-- to fulfill the 'block-step-size' constraint. If both options would result in the same amount of change, the size is increased.

	Name: block-step
	Value: <'block-step-size'> || <'block-step-insert'> || <'block-step-align'> || <'block-step-round'>
	Initial: See individual properties
	Applies to: block-level boxes
	Inherited: no
	Animatable: See individual properties
	Percentages: N/A
	Media: visual
	Computed Value: See individual properties
	

	Name: line-height-step
	Value: <>
	Initial: 0
	Applies to: block containers
	Inherited: yes
	Animatable: no
	Percentages: N/A
	Media: visual
	Computed Value: the absolute length
	

>, the line box heights are rounded up to the closest multiple of the unit. Negative <> values are invalid. [[!CSS21]] §10.8 Line height calculations defines how to compute the height of a line box from its inline-level content. The rounding is applied to the resulting height of the line box, and the additional space is distributed to over-side and under-side of the line box equally, so that the original line box appears at the center of the multiple of step unit. This adjustment is done by assuming that there is an inline-level box that has adjusted A' and D' in the line box. This inline-level box does not affect alignment points of the 'vertical-align' property, except values that align relative to the line box.

Rounding up the computed line box height.

Should this be animatable? There doesn't seem to be use cases but needed for consistency?

In the following example, the height of line box in each paragraph is rounded up to the step unit.

			:root {
			  font-size: 12pt;
			  --my-grid: 18pt;
			  line-height-step: var(--my-grid);
			}
			h1 {
			  font-size: 20pt;
			  margin-top: calc(2 * var(--my-grid));
			}
			p {
			  margin: 0;
			}
		

The line box in <h1> does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.

Authors can keep margins or other properties to be multiple of step unit using ''var()'' and ''calc()'' as in the example above. If author prefers, tools like Sass can make such declarations shorter.

		  $gu: 18px;

		  @function gu($n) {
		    @return $n * $gu;
		  }

		  h1 {
		    font-size: 20pt;
		    margin: gu(1.2) auto gu(1.8);
		  }
		

It is usually recommended to set the 'line-height' lower than the step unit. The used line height can increase due to several factors such as the use of 'vertical-align' or font fallback.

Privacy and Security Considerations {#priv-sec} =============================================== This specification introduces no new privacy leaks, or security considerations beyond "implement it correctly". Acknowledgments {#acks} ======================= This specification would not have been possible without the help from: Masaharu Akutsu, Yoko Aoki, Takao Baba, Chris Eppstein, Ichiro Inaba, Jxck, Noriko Kase, Motoya Kinoshita, Shinyu Murakami, Tsutomu Nanjo, Kiyoshi Narishima, Charlie Neely, Takuya Nishimura, Katsuhiro Osumi, Florian Rivoal, Hiroshi Sakakibara, Alan Stearns, Masataka Yakura, KADOKAWA Corporation, PixelGrid Inc., and the CSS Working Group members.