fix(card): remove white space from bottom of card (#18328)

When using a card with the button attribute the `<button>` element is
set to display: inline-block in chrome. This causes an undesirable line
of white space at the bottom of the card. This is most noticeable when
using an image inside the card where the bottom of the `<img>` tag won't
reach the bottom of the card.

Setting the button to have `display: block` ignores this white space
allowing the content to reach the end of the card.

core/src/components/card/card.scss

@@ -70,6 +70,8 @@
   @include padding(0);
   @include margin(0);
 
+  display: block;
+
   width: 100%;
   min-height: var(--min-height);
 
@@ -100,4 +102,4 @@ button, a {
 
 ion-ripple-effect {
   color: var(--ripple-color);
-}
+}

core/src/components/card/test/button/index.html

@@ -68,6 +68,10 @@
         </ion-card-content>
       </ion-card>
 
+      <ion-card button>
+        <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+      </ion-card>
+
     </ion-content>
 
   </ion-app>