Необходимо удалить пространство между двумя элементами внутри колонки React- Bootstrap - PullRequest
Новая
       23

Необходимо удалить пространство между двумя элементами внутри колонки React- Bootstrap

0 голосов
/ 15 января 2020

У меня есть SVG и элемент <p>, которые оба обернуты вместе внутри тега привязки.

Якорь вокруг элемента SVG и <p> все находятся внутри контейнера.

У меня есть стили для элемента контейнера, а также элемент <p>, чтобы расположить их рядом друг с другом и центрировать в середине родительского элемента, который является столбцом React- Bootstrap.

Right теперь SVG расположен непосредственно над элементом <p>, и если я удалю элемент тега привязки, между SVG и элементом <p> будет большой зазор, однако они располагаются на одной линии вместе и выровнены правильно.

У меня есть React HTML и соответствующий стиль ниже. Любые идеи о том, как их правильно выстроить?

HTML

<Col>
  <ClipboardContainer>
    <a href={url}>
      <ClipboardSvgLarge /><p>view order status ></p>
    </a>
  </ClipboardContainer> 
</Col>

Styled Components CSS

const ClipboardContainer = styled('div')((props) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: '10%',
  p: {
    margin: '0 auto',
    color: props.theme.colors.blueAlt,
    textTransform: 'uppercase',
    fontSize: '.75em',
    fontWeight: 600
  }
}))
...