From d53e7aa51ca2cfa7cf61be1afec25bc89c38a19c Mon Sep 17 00:00:00 2001
From: Robert Rhoades <studioromeo@users.noreply.github.com>
Date: Wed, 29 May 2019 15:18:25 +0100
Subject: [PATCH] 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              | 4 +++-
 core/src/components/card/test/button/index.html | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss
index 50207bb83c..11fbd5c1bd 100755
--- a/core/src/components/card/card.scss
+++ b/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);
-}
\ No newline at end of file
+}
diff --git a/core/src/components/card/test/button/index.html b/core/src/components/card/test/button/index.html
index abdc9a930a..27918ec465 100644
--- a/core/src/components/card/test/button/index.html
+++ b/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>