如何在元素之间创建空间（5px）？答案

【问题标题】：How create a space between elements (5px)?如何在元素之间创建空间（5px）？
【发布时间】：2020-12-31 16:55:57
【问题描述】：

我有两个网格，我想在元素之间创建间距，间距必须水平为 5px，我使用了间距={5}，但没有用

<Grid container direction={'row'} spacing={5}>
    <Grid item xs={12}>
        <FormControl
            className={classes.formControl}
            fullWidth
        >
            <InputLabel id="issue-label">Issue</InputLabel>
            <Select
                className={classes.select}
                id="issue"
                onChange={handleIssue}
            >
                <MenuItem value="" disabled>
                   Please select
                </MenuItem>
                ))}
            </Select>
        </FormControl>
    </Grid>
    <Grid item xs={12}>
        <TextField
            fullWidth={true}
            multiline
        />
    </Grid>
</Grid>

【问题讨论】：

你正在使用的Grid组件来自哪个库
@Chandan from '@material-ui/core'

标签： reactjs material-ui grid

【解决方案1】：

根据Grid component documentation page，spacing 属性中的数字乘以 8px。所以spacing={5}的意思就是两个item之间的差距其实是40px。

将spacing 属性替换为style={{ gap: 5 }}。这应该将项目之间的 flexbox 间隙设置为 5px。

【讨论】：

只是关于 gap 在浏览器上采用的说明，这很好，但现在不是超高的。 caniuse.com/flexbox-gap

【解决方案2】：

你也可以使用

.grid-container {
  grid-gap: 5px;
}

这是参考

https://www.w3schools.com/cssref/pr_grid-gap.asp

【讨论】：