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 {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; background: teal;&nbsp; padding: 10px;}.boxyc {&nbsp; border-top: 10px solid white;&nbsp; border-bottom: 10px solid white;&nbsp; border-left: 10px solid white;&nbsp; border-right: 10px solid white;&nbsp; border-radius: 5px;&nbsp; background-color: #CCCCCC;&nbsp; color: red;&nbsp; font-size: 1em;&nbsp; margin: 10px;}.vcxvcx {&nbsp; margin: 0;}<div class="carFilter">&nbsp; <p class="boxycx">Bla Bla:</p>&nbsp; <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>&nbsp; <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>&nbsp; <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>&nbsp; <span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>&nbsp; <span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span></div>

Answer 2

填充（和弹性盒）设置高度。我将 boxyc 的内边距更改为 5px 20px。调整以满足您的需求。.carFilter{&nbsp; &nbsp; display:flex;&nbsp; &nbsp; flex-direction:row;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;}p {&nbsp; margin: 0;}.boxyc{&nbsp; &nbsp; padding:5px 20px;&nbsp; &nbsp; &nbsp; border-top:1px solid white;&nbsp; &nbsp; &nbsp; border-bottom:1px solid white;&nbsp; &nbsp; &nbsp; border-left:1px solid white;&nbsp; &nbsp; &nbsp; border-right:1px solid white;&nbsp; &nbsp; border-radius:5px;&nbsp; &nbsp; background-color:#CCCCCC;&nbsp; &nbsp; color:#999999;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; font-size:150%;&nbsp; &nbsp; margin:0;}.boxycx{&nbsp; &nbsp; padding:20px;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; height:20%;&nbsp; &nbsp;&nbsp;}<div class="carFilter">&nbsp;<p class="boxycx">Bla Bla:</p>&nbsp;<span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>&nbsp;<span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>&nbsp;<span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>&nbsp;<span id="boxyc" class="boxyc"> <p class="vcxvcx">bla</p></span>&nbsp;<span id="boxyc" class="boxyc"><p class="vcxvcx">bla</p></span>&nbsp;</div>

Answer 3

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