Material-UI CardContent has a 3px Bottom Padding

Question

Note: I already looked into this question: Cant remove padding-bottom from Card Content in Material UI

But the accepted answer did not fix my issue.

I am using the Material UI React Library attempting to recreate the below image:

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.

Here is my code thus far:

<Card className={classes.card}>
  <CardActionArea containerStyle={{ paddingBottom: 0 }}>
    <CardMedia
      className={classes.media}
      title="Contemplative Reptile"
      image="none"
    >
      <div className={classes.heading}>
        <AccessAlarmIcon className={classes.icon}/> 
        <Typography className={classes.mainText} variant="h5" component="h2">Delayed</Typography>
        <Typography className={classes.subText} variant="subtitle1" component="h5">9:30pm Departure</Typography>
      </div>        
    </CardMedia>
    <CardContent className={classes.content}>
      <img className={classes.mainPic} src="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"></img>
    </CardContent>
  </CardActionArea>
</Card>

With these styles:

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",
    '&:last-child': {
      paddingBottom: "0 !important",
    },
  }
};

This is what it looks like when rendered:

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.

Again, I'm sure that my styles and JSX could be made better, but efficiency, optimization, and elegance were not of my concern.

Thanks, Jamie

Ryan Cogswell · Accepted Answer · 2019-01-19T05:07:57.573

5

That padding at the bottom is actually caused by the box-shadow styling tied to the "elevation" property of Paper (which Card is based on). Setting the elevation to 0 gets rid of it:

<Card className={classes.card} elevation={0}>

However that also gets rid of the raised look of the card. The correct way to deal with this is to specify the image in a CardMedia element rather than using a separate img tag inside a CardContent element.

<CardMedia
          className={classes.mainPic}
          image="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"
        />

Here's a CodeSandbox showing this:

You can also see this approach used in this demo:

https://material-ui.com/demos/cards/#ui-controls

edited Jan 19 '19 at 05:07

answered Jan 19 '19 at 04:49

Ryan Cogswell

75,046
9
218
198

Thanks. That works, but then I would have to add a border-radius to the picture to keep the rounded corners. – Jan 19 '19 at 05:00
Thanks. I know this is outside the scope of the original question, but would you happen to know the best way to scale the image? The image from the original picture appears to be here: https://www.mdtgroup.com/wp-content/uploads/2017/02/Golden-Gate-clouds-750x500.jpg What would you say is the best way to maintain the height of the picture as to fully fill the CardContent , but then to also scale inward a little bit? – Jan 19 '19 at 05:31
@JamieCorkhill Go ahead and create a new question — that’s the best way to make sure the answer can be found by others with the same question and it increases the chances of getting a high quality answer. – Ryan Cogswell Jan 19 '19 at 05:38
I'll do that tomorrow to see what some other solutions are. For now, I just used the `scale` property and gave `CardContent` `overflow: hidden`. – Jan 19 '19 at 05:48

Chance · Answer 2 · 2019-01-19T04:38:22.323

See if this is what you want. I changed mainPic and content. This syntax containerStyle={{ paddingBottom: 0 }} does not seem correct even gets the alert in the browser. Maybe you want to change the styleor classes={{root}} of the api CardActionArea.

mainPic: {
  width: 300,
  marginBottom: 0,
  padding: 0,
  borderRadius: '0 0 4px 4px',

},
content: {
  height: 225,
  padding: "0 !important",
  '&:last-child': {
    paddingBottom: "0 !important",
  },
}

Material-UI CardContent has a 3px Bottom Padding

2 Answers2

Linked