Button and Text distance too far

Question

I have 4 button and text arrange in each column. ( see picture bellow) My problem is text title of button is too far from icon. my 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;
    }

Here my 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>

i want distance between button and text about 5px.

please help me solve this.

Answer 1

If you don't have access to the generated HTML/CSS that renders the content inside the {{ }} tags, which is the real culprit, then you may be able to work around it by modifying your CSS for my-icon

.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 */
 }

And remove the CSS inline in the HTML.

The -20px bottom margin may compensate for the padding added by the generated HTML.