Как добавить пространство между всеми детьми div

Question

У меня есть стилизованный 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>
    )
}

Answer 1

Вы можете стилизовать любой элемент внутри вашего div, используя селектор * css:

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

Чтобы добавить пробел после каждого из них, вы можете использовать псевдокласс after следующим образом:

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