HTML a 无法更改大小或移动 [关闭]

Question

我在 div 内有一个锚元素，它不能调整大小或上下移动，当我向它添加填充时，它只会覆盖他的兄弟元素，我尝试使用 trasnfrom-translate、margin 和什么也没发生。

HTML 代码：

<div class="medio-item">
     <img src="../assets/mail.svg" class="icon" alt="Email">
     <div class="medio-item-text">
          <h3>Escribenos a:</h3>
          <a href="mailto:holafestival@toursfestival.com">holafestival@toursfestival.com </a>
     </div>
</div>

CSS 代码：

.contacto-medio {
    margin: 5rem 0;
    .contacto-medio-online {
        display: inline-block;
        width: 46rem;
        height: 42rem;
        background-color: #f87408cc;
        @include WidthAuto;
        .medio-item {
            display: flex;
        }
    }
}

.medio-item-text {
    color: white;
    h3 {
        font-size: 1.6rem;
        font-weight: 700;
    }
    a {
        color: black;
        background-color: white;
        border-radius: 5px;
        padding: 1rem;
        margin: 0;
    }
}

CSS 是 SCSS

Answer 1

我认为问题是由于 medio-item 的显示弯曲。添加 flex-direction: 列并检查结果：

.medio-item {
   display: flex;
   flex-direction: column;
}