CSS Слишком высокая граница, высота не влияет на элемент

Question

У меня довольно простая HTML конструкция. Теперь граница этого элемента слишком высока, я уже читал, что я могу изменить его, только изменив высоту элемента. Но изменение высоты ничего не меняет. Должно быть довольно простое решение. Спасибо за помощь.

.carFilter{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}

.boxyc{
    padding:20px;
      border-top:1px solid white;
      border-bottom:1px solid white;
      border-left:1px solid white;
      border-right:1px solid white;
    border-radius:5px;
    background-color:#CCCCCC;
    color:#999999;
    display: inline-block;
    font-size:150%;
    margin:0;
}

.boxycx{
    padding:20px;
    align-items: center;
    justify-content: center;
    height:20%;
    
}

<div class="carFilter">
 <p class="boxycx">Bla Bla:</p>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 </div>

Answer 1

отступ (и flexbox) устанавливает высоту. Я изменил отступ для boxy c на 5px 20px. Отрегулируйте в соответствии с вашими потребностями.

.carFilter{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}

p {
  margin: 0;
}

.boxyc{
    padding:5px 20px;
      border-top:1px solid white;
      border-bottom:1px solid white;
      border-left:1px solid white;
      border-right:1px solid white;
    border-radius:5px;
    background-color:#CCCCCC;
    color:#999999;
    display: inline-block;
    font-size:150%;
    margin:0;
}

.boxycx{
    padding:20px;
    align-items: center;
    justify-content: center;
    height:20%;
    
}

<div class="carFilter">
 <p class="boxycx">Bla Bla:</p>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
 <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
 </div>

Answer 2

Дайте margin:0; классу p.

.carFilter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: teal;
  padding: 10px;
}

.boxyc {
  border-top: 10px solid white;
  border-bottom: 10px solid white;
  border-left: 10px solid white;
  border-right: 10px solid white;
  border-radius: 5px;
  background-color: #CCCCCC;
  color: red;
  font-size: 1em;
  margin: 10px;
}

.vcxvcx {
  margin: 0;
}

<div class="carFilter">
  <p class="boxycx">Bla Bla:</p>
  <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
  <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
  <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
  <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>
  <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>
</div>

Answer 3

Добавление поля: 0 к элементам p решает слишком большую границу / фон.