Налипание кнопок flex

Question

Всем привет! Необходимо чтобы между кнопками было небольшое пространство. Но они почему-то слипаются друг с другом, пробовал в span обернуть - не получилось.

function ReportEditor(){
  return(
    <div className="wrapper">
      <p className="title">Title</p>
    
      <button className="btn">Button1</button>
      <button className="btn">Button2</button>
      <button className="btn">Button3</button>
  
    </div>
  )
}



  ReactDOM.render(
    <ReportEditor />,
    document.getElementById('root')
  );

.wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

Добавьте кнопкам отступы с помощью margin:

button {
  margin: 0 0 10px;
}

Работает:

function ReportEditor() {
  return (
  <div className = "wrapper">
      <p className = "title">Title</p>
      <button className = "btn">Button1</button>
      <button className = "btn">Button2</button>
      <button className = "btn">Button3</button>
    </div >
  )
}

ReactDOM.render(
  <ReportEditor / > ,
  document.getElementById('root')
);

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

БЛОГ НА HUSL

Налипание кнопок flex

Ответы (1 шт):