Home>

PROGATE Dojo Edition We are making the top part of the intermediate level.
For new registration, I applied margin: 15px 0;to this button, but it is not actually reflected.
The specified css is applied to the

tag and other buttons.

! [No margin is created under the new registration button] (ed36c61e650c1b9267f36537a8045399.jpeg)
Corresponding source code
Click here for new registration 
<p>or</p>
.page-header p {
  opacity: 0.7;
  margin-bottom: 15px;
}
.registration {
  background-color: # 239b76;
  margin-top: 15px;
  margin-bottom: 15px;
}
.btn {
  padding: 8px 24px;
  color: #fff;
  border-radius: 4px;
}
What I tried

When I check the page verification, the new registration button is displayed as if margin-bottom: 15px;is hit (there is a check mark). Even if you remove the check mark, the display status does not change.

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

  • Answer # 1

    Top and bottom margins do not work for inline elements.
    Convert it to an inline block as shown below.

    .registration {
      background-color: # 239b76;
      margin-top: 15px;
      margin-bottom: 15px;
      display: inline-block;/* Add * /
    }

    margin --CSS: Cascading Stylesheets | MDN