как сделать так, чтобы span занимал всю высоту div

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

*
{
    margin:0;
    padding:0;
}
.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;
}
.link  {
    background-color:LightGray;
    color:black;
    padding: 5px;
    font-size: 25px;
    overflow:hidden;
}

<div class="link"><b>

<span onmouseover="style="background-color:white;"" onmouseout="style="background-color:LightGray;"" style="color:black;" class="selector">Prehrana</span>
<span onmouseover="style="background-color:white;"" onmouseout="style="background-color:LightGray;"" style="color:black;" class="selector">Pica</span>
<span onmouseover="style="background-color:white;"" onmouseout="style="background-color:LightGray;"" style="color:black;" class="selector">Ciscenje  </span>
<span onmouseover="style="background-color:white;"" onmouseout="style="background-color:LightGray;"" style="color:black;" class="selector">Drugo</span>
<span onmouseover="style="background-color:white;"" onmouseout="style="background-color:LightGray;"" style="color:black;" class="selector">Akcija</span>

</b></div>

Текст внутри спанов на хорватском. Это также мой первый веб-сайт, который я создаю без помощи, так что не смейтесь надо мной, пожалуйста.

Сильный>.link является контейнером для всех .selectors, поэтому задайте ему известную высоту и сделайте его гибким контейнером, установив для него display: flex

Затем сделайте отображение спанов либо block, либо inline-block, потому что по умолчанию они inline – с этим вы можете задать их ширину, высоту и всё.

Вы можете затем установить высоту всех спанов на (100%) от высоты родителя

Вот так

 <style>
        .selector {
            cursor: pointer;
            padding-right: 40px;
            padding-left: 20px;
            display: inline-block;
            height: 100%;
            box-sizing: border-box;
        }

        .link {
            background-color: LightGray;
            color: black;
            padding: 5px;
            font-size: 25px;
            overflow: hidden;
            height: 50px; 
            display: flex; 
            align-items: center; 
        }

        .selector:hover {
            background-color: white;
        }
    </style>

    <div class="link">
        <b>
            <span class="selector">Prehrana</span>
            <span class="selector">Pica</span>
            <span class="selector">Ciscenje</span>
            <span class="selector">Drugo</span>
            <span class="selector">Akcija</span>
        </b>
    </div>

Я решил эту проблему, добавив

padding-top: 10px

padding-bottom: 10px

margin: -10;

в класс селектора

Установите для link фиксированный размер.

Удалите указанный отступ в link.

Установите для selector:hover высоту 100%.

Я также переместил ваши стили из html в css файл.

*
{
    margin:0;
    padding:0;
}
.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;

    /* РЕДАКТИРОВКА Перемещено сюда из html */
    color: black;
}

/* РЕДАКТИРОВКА Управление наведением (заменяет ваш mouseover и mouseout) */
.selector:hover  {
  background-color: white;

  height: 100%;
}

.link  {
    background-color:LightGray;
    color:black;
    /* РЕДАКТИРОВКА Удалите отступы здесь, чтобы мы могли контролировать пробел с помощью margin в .selector */
    /* padding: 5px; */
    font-size: 25px;
    overflow:hidden;

    /* РЕДАКТИРОВКА Необходимо иметь фиксированный размер */
    height: 3rem;
}

<div class="link"><b>
  <!-- РЕДАКТИРОВКА Перемещены ваши стили в .css файл -->
  <span class="selector">Prehrana</span>
  <span class="selector">Pica</span>
  <span class="selector">Ciscenje  </span>
  <span class="selector">Drugo</span>
  <span class="selector">Akcija</span>
</b></div>

</div><div class="s-prose js-post-body" itemprop="text">

Попробуйте это

*
{
    margin:0;
    padding:0;
}
.selector {
    padding:20px;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
}

.link {
    background-color: LightGray;
    color: black;
    font-size: 25px;
    overflow: hidden;
    height: 50px; 
    display: flex; 
    align-items: center; 
}

.selector:hover {
    background-color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackoverflow.com/questions/79090486/style.css">
</head>
<body>

    <div class="link">
        <b>
            <span class="selector">Prehrana</span>
            <span class="selector">Pica</span>
            <span class="selector">Ciscenje</span>
            <span class="selector">Drugo</span>
            <span class="selector">Akcija</span>
        </b>
    </div>

</body>
</html>