html flex 的高度,HTML – flex属性混乱按钮高度？

我正在使用bootstrap并使用flex进行布局.

目前按钮正在占据容器的高度.文本下面有很多空间,我想删除i,当我向按钮添加填充时,它的大小会变得不均匀.我试图通过线高调整大小,但我试图找到实际的解决方案和原因,为什么我有这个问题.

我在这里缺少任何与flex相关的东西,还是其他东西？

任何帮助将受到高度赞赏.

谢谢.

.vessel-card {

display: flex;

flex-direction: column;

}

.vessel-card h3 {

margin: 0;

padding: 20px 0;

}

.departure-card {

display: flex;

padding: 20px 0;

border-top: 2px solid #888;

}

.departure-card p {

margin-right: 10px;

}

.departure-card:last-child {

border-bottom: 2px solid #888;

}

.departure-card .btn-explore {

border: 1px solid #000;

display: inline-block;

text-transform: uppercase;

color: #000;

border-radius: 0;

}

Vessel: Panorama

Havana to Cienfuegos starting at $5,999

Explore

Havana to Cienfuegos starting at $5,999

Explore