[Malleys]

а можно про это чуть подробнее? что именно оно делает?

Удивительно... поискав на русском языке, тут же получаешь массу объяснении, например, такое https://developer.mozilla.org/ru/doc...vertical-align
Также посмотрите наглядный пример, как vertical-align влияет на элемент Блондинка...

<code>
	vertical-align: <select onchange="test.style.verticalAlign = this.value;">
		<optgroup label="alignment-baseline">
			<option>baseline
			<option>text-bottom
			<option>alphabetic
			<option>ideographic
			<option>middle
			<option>central
			<option>mathematical
			<option>text-top
			<option>bottom
			<option>center
			<option>top
		</optgroup>
		<optgroup label="baseline-shift">
			<option>-20px
			<option>20px
			<option>-150%
			<option>150%
			<option>sub
			<option>super
		</optgroup>
	</select>
</code>
<p><span>А</span> <span id="test">Блондинка</span> <span>Б</span></p>

<style>
	
code, p, span {
	border: solid #ff1493;
	display: inline-block;
}
	
code {
	padding: 0.5em;
}
	
p {
	font: 400% sans-serif;
}
	
	p > span {
		display: inline-block;
		font-size: 60%;
	}
	
#test {
	border: solid #ffd700;
	font-weight: bold;
	font-size: 100%;
}

select {
	font: inherit;
}
</style>