How to remove space (margin/padding) of ion-row and ion-col in ionic?

Question

Here is my code:

<ion-content padding text-center>
    <img src="../assets/img/logo.png" width="200" class="logo" />


</ion-content>
<ion-footer>
    <ion-row no-padding>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
    </ion-row>
</ion-footer>

I need to remove those paddings/margin for ion-row and ion-col. I tried googling but i got no luck. I am also newbie in Ionic. TIA!

Here is the screenshot:

I need to achieve this:

Solution 1

You need to set the no-padding attribute on ion-col instead of ion-row and no-margin for the buttons.

<ion-row>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
</ion-row>

Solution 2

For those using Ionic4+ , use class="ion-no-padding" or class="ion-no-margin".

...
<ion-col class="ion-no-padding">
   <ion-button class="ion-no-margin">Button</ion-button>
</ion-col>
...

For more info please refer to the docs: https://ionicframework.com/docs/layout/css-utilities#element-padding.