Единицу измерения line-height
- можно указывать и без каких либо мер: line-height: 1.5
, более того, возможность указывать,- ту или иную единицу измерения внесли относительно недавно. Скажу откровенно, уже не помню, что и откуда и с каких данных парсер высчитывает, если не указывать единицу измерения.
.posts-item__date {
position: absolute;
top: 20px;
left: 20px;
border-radius: 3px 3px 0 0;
background-color: #c7b299;
width: 50px;
height: 35px;
color: #ffffff;
font-family: Montserrat-Light;
font-size: 24px;
line-height: 1.5;
/*изменения тут*/
text-align: center;
}
<div class="posts-item__date">30</div>
Вариант второй, если контент многострочный
.posts-item__date {
position: absolute;
top: 20px;
left: 20px;
border-radius: 3px 3px 0 0;
background-color: #c7b299;
width: 150px;
height: 75px;
color: #ffffff;
font-family: Montserrat-Light;
font-size: 24px;
text-align: center;
/*все делает данный кусок кода*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*естественно можно и не flex использовать*/
}
.posts-item__date>span {
background-color: green;
}
.posts-item__date_1 {
position: absolute;
top: 120px;
left: 20px;
border-radius: 3px 3px 0 0;
background-color: #c7b299;
width: 150px;
height: 75px;
color: #ffffff;
font-family: Montserrat-Light;
font-size: 24px;
text-align: center;
/* обрати внимание, как line-height воздействует на span */
line-height: 5;
}
.posts-item__date_1>span {
background-color: green;
}
<div class="posts-item__date">
<span>30</span>
<span>сентябрь</span>
</div>
<div class="posts-item__date_1">
<span>30</span>
</div>