Есть такой блок который нужно сверстать:
Вот код:
.active-line {
border: 5px solid #CBAB3A;
border-radius: 5px 5px 0 0;
top: 0;
left: 0;
outline: 0;
}
.hadjj-content-methods-blocks {
background: #FFFFFF;
box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
border-radius: 5px;
width: 280px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 0px 0px 10px 0px !important;
/* Для явности добавил бордер */
border: 1px solid #000;
}
.hcmb-title {
font-size: 24px;
font-weight: 600;
}
.hcmb-date {
color: #828282;
font-size: 16px;
}
.hcmd-methods {
display: flex;
align-items: center;
justify-content: space-around;
}
<div class="hadjj-content-methods-blocks">
<div class="active-line"></div>
<div class="hcmb-title">«Люкс»</div>
<div class="hcmb-date">20 июля - 11 августа</div>
<div class="hcmd-methods">
<div class="hcmbm-kaaba"></div>
<div class="hcmbm-detail">
<div class="hcmbmd-methods">
<div class="plane-method"></div>
</div>
<div class="hcmbmd-price">от 155 000 Р</div>
</div>
</div>
</div>
<!-- Думаю для проблемной части этого кода хватит -->
Как видите эта линия в моем исполнении выглядит вообще не так как нужно, не могу понять откуда этот отступ и как его убрать. Как сделать чтобы эта линия .active-line
плотно прилегала к верху блока .hadjj-content-methods-blocks
?