Spacing between antd Image components in React

user_16499469 0
Viewed 310

I am using the antd's Image component since I want that preview functionality it has but the style isn't taking affect when I am trying to add some space between my images. They are just stacked together with no space. The same thing works when I use <img> tag. Any insights on how to tackle this issue?

<div>
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
</div>
antd reactjs
2 Answers

According to the Image component API, the component doesn't take a style prop.

I would suggest using a wrapper component to apply the margin-right: 15px; rule.

<div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
</div>
user_86908570

You can leverage AntD's Space component.

<Space size={15}>
  <Image src={image} />
  <Image src={image} />
  <Image src={image} />
</Space>
user_62456500
Related