如何在div的所有孩子之间添加空格答案

【问题标题】：How to add space between all children of div如何在div的所有孩子之间添加空格
【发布时间】：2019-05-27 07:09:43
【问题描述】：

我有一个样式化的 div，我想在所有孩子之间留出一些空间。由于子项可以是项目中的任何其他组件（按钮、div、段落等），因此我无法为其添加填充，因此我想从样式化的 div 本身中找到一种方法。也不知道 div 会有多少个孩子。有时它可能是空的，有时它可能有三四个孩子。

有没有办法做到这一点？

我已经尝试了几件事，但到目前为止没有任何效果。

这是现在的 div：（美学样式在其父级中完成）

const StyledBox = styled.div`
    float: right;
    min-width: 50px;
`

这个 div 是 Header 的一部分

const StyledParent = styled.div`
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
`

const StyledBottom = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    min-height: 65px;
`

const Header = (props) => {
    return (
        <StyledParent {...props}>
            <StyledTop {...props}>
            </StyledTop>
            <StyledBottom>
                <StyledBox {...props}></StyledBox>
            </StyledBottom>
        </StyledParent>
    )
}

【问题讨论】：

你能提供组件的工作示例吗？
给一些你想要的理想的东西。

标签： reactjs styled-components

【解决方案1】：

您可以使用* css 选择器为 div 中的任何元素设置样式：

const Div = styled.div`
 * {
   //style applied to every elements
  }
`;

要在每个之后添加空格，您可以像这样使用after 伪类：

const Div = styled.div`
  * {
    &::after {
      content: " "; //space inserted after each element
    }
  }
`

【讨论】：