如何在 Ionic 应用程序中删除此空间

Question

我想用 .prof-cont 的类删除头像和我的 div 之间的空间，它们都在 div 和 maincontent 的类我尝试使用 no-padding 不工作我的课程仍然是同样的问题，我做错了什么我的视图和 sass 文件的代码。这是一个 Ionic 3 项目。

查看

<ion-content>
    <div class="profile">
    </div> 
    <div class="maincontent">
        <ion-avatar no-padding> 
            <img src="../assets/profile/profilesnap.png" class="dp"> 
        </ion-avatar> 
        <div class="prof-cont">
            <h2 text-center>John Doe</h2>
            <p text-center padding>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa fuga cupiditate quos doloremque nulla ex a, rerum, eos nesciunt dolorum excepturi unde dolores nam.</p> 
        </div> 
        <!--Segments  -->
        <div padding>
            <ion-segment [(ngModel)]="profile">
                <ion-segment-button value="service">
                    Service
                </ion-segment-button>
                <ion-segment-button value="review">
                    Review
                </ion-segment-button>
            </ion-segment>
        </div>
        ....
<ion-content> 

对于我的 SASS 文件

page-instraprofile {
    .scroll-content{
        // text-align: center;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // text-align: center;
    }

    .profile{
        // background-image: url('../assets/bg@3x.png');

        background-repeat: no-repeat;
        background-size: cover;
        height: 30%;
    }

    .maincontent{
        background-color: aqua;
    }

    .dp{
        position: relative;
        left: 50%;
        transform: translate(-50%,-50%);
        // z-index: 10;
    }

    ion-avatar{
        img{}
    }

    .prof-cont{
        height: 100%;
        color: red;
        padding-top: 0 !important;
        background-color: yellow;

        h2{
            color: green;
        }
    }
}

Answer 1

这里的主要问题是transform: translate()。

它将图像一半的高度移向顶部（translate(-50%,-50%) 中的第二个参数沿其 y 轴重新定位元素），但这只会发生从视觉上看，这意味着它在技术上仍然处于文档流中的原始位置。 （见下图）

为了保持文档的动态流动，并且由于图像包装器<ion-avatar no-padding> 出现的目的是将图像固定到位，将其高度降低到图像高度的一半左右，它仍然会将图像定位在它所在的位置是现在，尽管以下元素会向上移动。

即：

ion-avatar{
  height: 60px;        /*  adjust this value to control the distance to the text  */
}

---