无法将按钮位置向下移动

Question

我是 CSS.I 的新手，我正在尝试将与另一个按钮重叠的按钮位置向下移动。我尝试将按钮放在不同的 div 中，但仍然面临同样的问题。下面是我的代码

<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 两个按钮的代码

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;

}

在上面的代码中，我需要将 button1 从 button 向下移动。谁能帮我解决这个问题。

Answer 1

该按钮可能会占用整个 space 容器 div。而是尝试将边距应用到容器而不是按钮

即

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

Answer 2

问题是您没有在按钮上应用边距。您正在应用填充，这是从内部按钮的边框到内容的间距。

您需要为其应用保证金，它仍然有效。 Div 是一个块元素，因此如果您放置边距，它只会按比例放大以匹配所需的高度。

将边距应用到 div 也是正确的，但这取决于您要完成的任务。

无法将按钮位置向下移动

Unable to move the button position to down

javascript

css