Встроенные блочные элементы не выровнены должным образом по вертикали

---

Привет,

У меня есть элемент строки, который содержит несколько встроенных блочных элементов. Проблема в том, что я не могу добавить отступ или маржу к любому из них, потому что сама маржа переполняется. Я бы хотел, чтобы все элементы были идеально выровнены по вертикали.

Вот изображение этого вопроса:
здесь[^]

HTML:

<div id='content'>
	<div class='row'>
		<span class='label'>Alerts</span>
		<div class='checkbox'>
			<div class='checkbox_inner'></div>
		</div>
		<span class='label checkbox_label'>Enable Email Alerts</span>
	</div>
</div>

CSS, влияющий на эти элементы:

body
{
	color: white;
	margin: 0;
	font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

#content
{
	width: 100%;
	height: calc(100% - 48px);
	background: linear-gradient(180deg, rgb(30,40,45), black);
	color: rgb(150,155,160);
	position: absolute;
}

.inline_textbox
{
	display: inline-block;
}

.row
{
	margin: 8px 0;
}

.row:after
{
	clear: both;
}

.label
{
	width: 200px;
	display: inline-block;
}

.checkbox
{
	display: inline-block;
	border-radius: 2px;
	border: 1px solid rgb(80,100,120);
	transition: border-color 0.3s;
	cursor: pointer;
}

Что я уже пробовал:

Упомянуто в вопросе
----------------------

---