不能填充，底部适用于内部span元素

Question

.scss

div.playlist { 
     position: relative; 
     display: inline-block; 
    } 
    div.playlist span { 
     position: absolute; 
     text-align: center; 
     height: 100%; 
     width: 100%; 
     color: white; 
     font-size: 20px; 
     .span-icon { 
      padding-bottom: 50px !important; 
     } 
    } 
    div.playlist span:before { 
     display: inline-block; 
     vertical-align: middle; 
     height: 100%; 
     content: ''; 
    } 

的.html

<div class="playlist"> 
    <span class="span-icon"><ion-icon name="ios-star-outline"></ion-icon></span> 
    <span>{{data.text}}</span> 
    <img [src]="data.imageUrl" [alt]="data.text" /> 
</div> 

我需要给padding-bottom: 50px只有第一span元素（即class="span-icon"）。我已经尝试过如下。但它不起作用。你能告诉我问题在哪里吗？

div.playlist span { 
     position: absolute; 
     text-align: center; 
     height: 100%; 
     width: 100%; 
     color: white; 
     font-size: 20px; 
     .span-icon { 
      padding-bottom: 50px !important; 
     } 
    } 

渲染的浏览器：

<ion-col class="col" col-6=""> 
     <playlist ng-reflect-data="[object Object]"><div class="playlist"> 
    <span class="span-icon"><ion-icon name="ios-star-outline" role="img" class="icon icon-md ion-ios-star-outline" aria-label="star outline" ng-reflect-name="ios-star-outline"></ion-icon></span> 
    <span>My Favorites</span> 
    <img src="./assets/images/img2.jpg" alt="My Favorites"> 
</div></playlist> 
     </ion-col> 

Answer 1

您指定的SCSS不正确。请使用下面的内容。 .span-icon不是span一个孩子，但.playlist

div.playlist { 
 
    span { 
 
    position: absolute; 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    font-size: 20px; 
 
    } 
 
    .span-icon { 
 
    padding-bottom: 50px !important; 
 
    } 
 
}

Answer 2

移动.span图标出的跨度样式CSS。根据您的HTML，跨度图标应用于跨度，即不在跨度范围内。