html - 设置两个类之间的距离

Question

大家好，昨天开始学习 HTML5 和 CSS3，只是遇到了一些问题。 如果你们中的任何人可以在这里帮助我，请查看此处的其他一些帖子并调整不同的边距选项，但我找不到正确的规则。

我正在尝试将一个名为 .content 的类和另一个 .byline 隔开(后跟彼此。 我试过:

这是 CSS。

 .content {
  margin-bottom: 30px; } 

还有:

.content.byline {
  margin: 30px 30px;}

.byline {
  margin-top: 30px;}

这是 HTML:

<div class="content">
  <h3> bla bla </h3>
 <span class="byline">blabla</span>

这是目前的两个类:

.content {
 margin: 0 auto;
 padding: 40px;
 text-align: center;
 width: 70px; }

 .byline {
 font-size: 14px;
 padding-top: 10px;
 padding-bottom: 1Opx;
 font-family: Roboto;
 border-top: 2px solid #CCC;
 border-bottom: 2px solid #CCC; }`

请原谅我的初学者解释，感谢您在这里帮助我。

Answer 1

h3 元素默认在顶部和底部有边距。如果您希望您的 byline 获得比这更多的距离，通过边距，您必须增加 h3 的 margin-bottom 足以产生差异。

尝试将 margin-bottom: 70px; 添加到您的 h3。

h3 {
    margin-bottom: 70px;
}

顺便说一下，.byline 上的 padding-bottom 中的 10px 是用“O”写的。