Это потому, что span является элементом inline по умолчанию и заполнение сверху / снизу не влияет на высоту. Если вы хотите установить отступы, просто установите span display: block. Справка: https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced
body {
margin: unset;
}
button, div {
display: block;
width: 100%;
justify-content: center;
align-items: center;
padding: 12px;
border: 1px solid black;
}
button span,
div span {
/* if button, div is set to display: block, their (parent) padding isn't factored in */
padding: 10px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div><span>div</span></div>
<button><span>button</span></button>
</body>
</html>
О display: flex Поведение:
Отображаемое значение гибкого элемента блокируется: если указано
отображение входящего дочернего элемента элемента, генерирующего гибкий контейнер
это значение на уровне строки, оно вычисляется до его эквивалента на уровне блока.
(См. CSS2.1§9.7 [CSS21] и CSS Display [CSS3-DISPLAY] для получения подробной информации о
этот тип преобразования отображаемого значения.)
Ссылка: https://www.w3.org/TR/css-flexbox-1/#flex-containers