html - 按钮和文本距离太远

Question

我在每列中排列了 4 个按钮和文本。 (见下图) 我的问题是按钮的文本标题离图标太远。 我的CSS:

.ButtonPDetails {
        font-size:10px !important;
        overflow: hidden;
        white-space: nowrap;
    }
    .col{
        text-align:center !important;
    }
    .rowL{
        padding-bottom:0px !important;
        margin:0px !important;
    }
    .my-icon:before,
    .my-icon{
        font-size:20px !important;
        display:block !important;
        line-height: 40px !important;
    }

这是我的 html:

 <div class="row rowL">
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-bag my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblPlaceOrder}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-ios-cart my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblAddToCart}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-ios-information-outline my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblInfo}}
                    </a>
                </div>
                <div class="col">
                    <a href="" class="button button-icon  ButtonPDetails">
                        <i class="icon ion-android-globe my-icon" style="padding: 0px;margin: 0px"></i>
                        {{$root.themeConfig.lblShare}}
                    </a>
                </div>
            </div>

我希望按钮和文本之间的距离约为 5px。

请帮我解决这个问题。

Answer 1

如果您无法访问在 {{ }} 标签内呈现内容的生成的 HTML/CSS，这是真正的罪魁祸首，那么您可以解决它通过修改 my-icon 的 CSS

.my-icon {
    font-size:20px !important;
    display:block !important;
    line-height: 40px !important;
    padding: 0px !important;
    margin: 0px 0px -20px !important; /* top, right/left, bottom */
 }

并删除 HTML 中的 CSS 内联。

-20px 底部边距可以补偿生成的 HTML 添加的填充。