Home>
the issue's details

About Progate Intermediate Dojo Course 1.
I created three buttons (class name sign-up, facebook, twitter) in HTML and applied margin with CSS.
Margin is not applied above and below the class sign-up.
Please tell me how to adapt and what was the problem.
I look forward to working with you.
* If there are any deficiencies in the content of the question, we will correct it.

Source code
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Progate</title>
<link rel = "stylesheet" href = "stylesheet.css">
<!-Load Font Awesome here->
<link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<!-Let's write the code here->
  
    
       LEARN TO CODE.<br>
      LEARN TO BE CREATIVE. 
    <p>Progate is an online programming learning service.<br>
      Learn programming while creating web services with beginner-friendly slides and lessons.</p>
       Click here for new registration 
    <p>or</p>
       Register on Facebook 
       Register on Twitter 
    
  
</body>
</html>
/ * CSS reset (do not erase) * /
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}
body {
  font-family:'Hiragino Kaku Gothic ProN W3', sans-serif;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
/ * Let's write CSS from here * /
.top-wrapper {
  background-image: url (https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  height: 350px;
  width: 100%;
  padding: 180px 0 100px 0;
  text-align: center;
  color: white;
}
.container {
  width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}
.top-wrapper h1 {
  font-size: 45px;
  letter-spacing: 5px;
  opacity: 0.7;
}
.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 15px;
}
.btn {
  padding: 8px 24px;
  color: white;
  opacity: 0.8;
}
.sign-up {
  background-color: # 239b76;
 Margin-top: 15px;
  margin-bottom: 15px;
}
.facebook {
  background-color: # 3b5998;
  margin-right: 10px;
}
.twitter {
  background-color: # 55acee;
}
Current status Completion drawing
  • Answer # 1

    There are two problems.

    .sign-upBelow
    Margin-top: 15px;
    Double-byte spaces are confused.
    Correct it to half-width space.
    margin-top: 15px;

    Since the a element is an inline element, the upper and lower margins do not work in the first place.
    It will work if you convert it to an inline block element as shown below.

    .btn {
      padding: 8px 24px;
      color: white;
      opacity: 0.8;
      display: inline-block;/* Add * /
    }
    .sign-up {
      background-color: # 239b76;
      margin-top: 15px;
      margin-bottom: 15px;
    }

  • Answer # 2

    Hello.

    The cause is that it is inline.

    You can think of an inline formatting context as a paragraph context that exists within other formatting contexts. Paragraphs on the textWhen elements such as, ,are usedCreate an inline formatting context like.

    The box model does not fully apply to items participating in the inline formatting context. Lines in horizontal mode apply horizontal padding, boundaries, and margins to the element, pushing the text left and right. However, the top and bottom margins of the element do not apply.Horizontal padding and boundaries are applied, but in an inline formatting context, the linebox is not stretched by padding or boundaries, so the top and bottom contents overlap.There is a possibility.
    Inline Shaping Context | Introducing Shaping Context-CSS: Cascading Stylesheets | MDN


    The solution is, but the quickest way isdisplay: inline-blockFor example, it is a block layout.

  • Answer # 3

    In the btn classdisplay: inline-block;Add.