不能填充，底部適用於內部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，跨度圖標應用於跨度，即不在跨度範圍內。