Unable to move the button position to down-CodePudding

I am new to CSS.I am trying to move the position of button down which is overlapping with another button. I tried putting the button in different div, still facing the same issue. Below is my code

<div className="App">
      {!showEvents && (<div>
        <button onClick= {() => setShowEvents(true)}>Show Events </button>
      </div>)}
      {showEvents && (<div>
        <button onClick = {() => setShowEvents(false)}>Hide Events</button>
      </div>)}
      <Title title={title} />

      {showEvents && < Eventlist events={events} handleClick = {handleClick} />}
      
      {showModal && (
        <Modal handleClose={handleClose}>
          <h2>Terms and Conditions</h2>
          <p>Agree the terms and Conditions</p>
        </Modal>
      )}
      
      <div>
      
        <button1 onClick={() => setShowModal(true)}> Show </button1>
        </div>
      
    </div>
  );
}

// Export the App component to consume/ import the component in some other pages.
export default App;

CSS code for two buttons

button{
  display: inline-block;
  padding: 10px 20px;
  background: #f1f6;
  border-radius: 8px;
  font-weight: normal;
  height: 40px;

}

button1{
  display: inline-block;
  padding: 10px 20px;
  background: #f1f6;
  border-radius: 8px;
  font-weight: normal;
  height: 40px;

}

In the above code, I need to move button1 down from button. Can anyone help me to resolve this issue.

CodePudding user response：

The button is likely taking up the full space of the container div. Instead trying applying a margin to the container rather than the button

ie.

.button-div {
  margin: 10px 0;
}

CodePudding user response：

The problem is that you are not applying a margin on the button. You are applying padding, which is spacing from the border of the button inside towards the content.

You need to apply margin to it and it will still work. Div is a block element so if you put margin it will just scale up to match the needed height.

Applying margin to the div is also correct though depending on what you are trying to accomplish.