2つのクラス間の距離を設定する

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を十分に増やす必要があります。

h3にmargin-bottom: 70px;を追加してみてください。

h3 { 
    margin-bottom: 70px; 
} 

ところで、.byline上padding-bottomであなたの10pxのは、 "O" と書かれています。