HTML div不包裝<i>標籤

Question

我想讓我的div包裝<i>標籤，但它不包裝，高度始終高於我的div，並且我的<i>標記沒有填充或邊距，我嘗試過很多事情，但不能正常工作，我加入了我的風格和HTML代碼，我也將增加一些截圖

CSS

<style> 
.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: inherit; 
    display: inline-block; 
    line-height: 1; 
    text-transform: none; 
    letter-spacing: normal; 
    word-wrap: normal; 
    white-space: nowrap; 
    direction: ltr; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    -moz-osx-font-smoothing: grayscale; 
    font-feature-settings: 'liga'; 
} 

.button-content-ic { 
    display: inline-block; 
    margin: auto; 
} 

body, section, div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
</style> 

HTML

個

<div class="button-content-ic"> 
        <i style="color: #fff;" class="material-icons">menu</i>    </div> 

SCREENSHOTS

標籤

包裝標籤

在此先感謝您的幫助。

Answer 1

也許這是你在尋找什麼：

.material-icons { 
 
    font-family: 'Material Icons'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: inherit; 
 
    display: block!important; 
 
    line-height: 1; 
 
    text-transform: none; 
 
    letter-spacing: normal; 
 
    word-wrap: normal; 
 
    white-space: nowrap; 
 
    direction: ltr; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    font-feature-settings: 'liga'; 
 
    color: #ffffff; 
 
} 
 
.button-content-ic { 
 
    background-color: #555555; 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 
body, 
 
section, 
 
div, 
 
i { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<div class="button-content-ic"><i class="material-icons">menu</i> 
 
</div>