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

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 2

填充（和弹性盒）设置高度。我将 boxyc 的内边距更改为 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 3

在 p 元素中添加 margin:0 解决了边框/背景过大的问题。