vertical-align test

by phloe

HTML

<input type="range" name="fontSize" min="0" max="200" value="16" />
<input type="range" name="lineHeight" min="0" max="200" value="16" />
<input type="range" name="verticalAlign" min="-200" max="200" value="0" />

<hr/>

<div id="testContainer"><span id="test">Hello</span><!--i>foo</i--></div>

CSS

div {
  background-color: cyan;
}

span {
  background-color: yellow;
}

i {
  background-color: magenta;
}

#testContainer {
  display: inline;
}

JavaScript

[...document.querySelectorAll("input")].forEach((input) => {
	const { name } = input;
	function set() {
		test.style[name] = input.value + "px";
  }
  input.oninput = set;
  set();
});