title: Material-UI CardContent has a 3px Bottom Padding
body: <p>Note: I already looked into this question: <a href="https://stackoverflow.com/questions/54236623/cant-remove-padding-bottom-from-card-content-in-material-ui/54239043?noredirect=1#comment95351781_54239043">Cant remove padding-bottom from Card Content&#160;in Material UI</a></p>
  
  <p>But the accepted answer did not fix my issue.</p>
  
  <p>I am using the Material UI React Library attempting to recreate the below image:</p>
  
  <p><a href="https://i.stack.imgur.com/FPFlx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FPFlx.png" alt="enter image description here"></a></p>
  
  <p>I am completely new to using the Material UI, so most of my code will likely not be optimized and probably does not follow best practices. Indeed, I'd be interested to hear how it could be made better. </p>
  
  <p>Here is my code thus far:</p>
  
  <pre><code>&lt;Card className={classes.card}&gt;
    &lt;CardActionArea containerStyle={{ paddingBottom: 0 }}&gt;
      &lt;CardMedia
        className={classes.media}
        title="Contemplative Reptile"
        image="none"
      &gt;
        &lt;div className={classes.heading}&gt;
          &lt;AccessAlarmIcon className={classes.icon}/&gt; 
          &lt;Typography className={classes.mainText} variant="h5" component="h2"&gt;Delayed&lt;/Typography&gt;
          &lt;Typography className={classes.subText} variant="subtitle1" component="h5"&gt;9:30pm Departure&lt;/Typography&gt;
        &lt;/div&gt;        
      &lt;/CardMedia&gt;
      &lt;CardContent className={classes.content}&gt;
        &lt;img className={classes.mainPic} src="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"&gt;&lt;/img&gt;
      &lt;/CardContent&gt;
    &lt;/CardActionArea&gt;
  &lt;/Card&gt;
  </code></pre>
  
  <p>With these styles:</p>
  
  <pre><code>const styles = {
    card: {
      maxWidth: 300,
    },
    media: {
      height: 60,
      backgroundColor: "#FF1547",
      padding: 16
    },
    icon: {
      color: "white",
      fontSize: 25,
      marginRight: 10
    },
    mainText: {
      color: "white",
      display: "inline-block",
      position: "relative",
      top: -3
    },
    subText: {
      color: "white",
      marginLeft: 36,
    },
    heading: {
      padding: 0
    },
    mainPic: {
      width: 300,
      height: 200,
      marginBottom: 0,
      padding: 0
    },
    content: {
      padding: "0 !important",
      '&amp;:last-child': {
        paddingBottom: "0 !important",
      },
    }
  };
  </code></pre>
  
  <p>This is what it looks like when rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/9uAHS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9uAHS.png" alt="enter image description here"></a></p>
  
  <p>Notice the bottom padding. The Chrome Developer Tools show a 3px bottom padding under the User Agent Stylesheet. I imported a CSS Reset which did not help. </p>
  
  <p>Again, I'm sure that my styles and JSX could be made better, but efficiency, optimization, and elegance were not of my concern.</p>
  
  <p>Thanks,
  Jamie</p>