改行後の行間をどのように取り出すのですか？

Question

私はそれらの間に行間を置くように、私はそれらがお互いのすぐ下になるように2つの行を持っています。しかしその後、この線の間には大きなギャップがあります。

どのように行（ "h8 adr"と "h8 no"）を区切りながらも区切りの間にスペースは入れませんか？

マイコード：

.adr { 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    padding-top: 65px; 
 
    padding-bottom: 65px; 
 
    padding left: 65px; 
 
    padding-right: 65px; 
 
    font-size: 500%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.no { 
 
    font-stretch: condensed; 
 
    font-size: 20px; 
 
}

<h1 class='adr'> 
 

 
    A place 
 
    <br> 
 
    <h8 class='ad'> 
 
    4567 postal code An Address 
 
    </h8> 
 
    <br> 
 
    <h8 class='no'> 
 
    Phone: 123-456 789 Fax: 123-456 789 
 
    </h8> 
 
</h1>

Answer 1

が第二<br>を奪うと.noはdisplay: blockを持っています

.adr { 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    padding-top: 65px; 
 
    padding-bottom: 65px; 
 
    padding left: 65px; 
 
    padding-right: 65px; 
 
    font-size: 500%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.no { 
 
    font-stretch: condensed; 
 
    font-size: 20px; 
 
    display: block; 
 
}

<h1 class='adr'> 
 

 
    A place 
 
    <br> 
 
    <h8 class='ad'> 
 
    4567 postal code An Address 
 
    </h8> 
 
    <h8 class='no'> 
 
    Phone: 123-456 789 Fax: 123-456 789 
 
    </h8> 
 
</h1>

Answer 2

最も簡単な方法は、単にdisplay: block
を適用することにより、block-level elementに.noを回すことであろう。

.no { 
    display: block; 
    margin-top: -24px; 
} 

使用する正確な負のマージンは、あなたが2番目のテキストが座って、しかし-24pxは正確な下にある要素を配置しますたい正確に依存します。その後、negative marginsを使用してオフセットを調整することができます先行要素：

.adr { 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    padding-top: 65px; 
 
    padding-bottom: 65px; 
 
    padding-left: 65px; 
 
    padding-right: 65px; 
 
    font-size: 500%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.no { 
 
    font-stretch: condensed; 
 
    font-size: 20px; 
 
    display: block; 
 
    margin-top: -24px; 
 
}

<h1 class='adr'> A place 
 
    <br> 
 
    <h8 class='ad'> 
 
    4567 postal code An Address 
 
    </h8> 
 
    <br> 
 
    <h8 class='no'> 
 
    Phone: 123-456 789 Fax: 123-456 789 
 
    </h8> 
 
</h1>

また、次の点に注意してください

• あなた.adrがpadding leftの代わりpadding-leftを持っています。これは上の例で修正されています。
• また、の2つの要素の間には<br />が含まれていますが、オフセットを調整する必要があることに注意してください。
• <h8>は、custom elementとなります。 standard HTML headingsは、h6にしかなりません。

:)

Answer 3

改行を削除して、そのアドレスを段落タグにスローすることができます。この方法で、スタイルを変更する必要はありません。それが十分に近くない場合は、ディスプレイをブロックに変更し、マージン/パディングを調整するとそのトリックが行われます。これはあなたが ` `を必要とする理由私は、思ったんだけど

.adr { 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    padding-top: 65px; 
 
    padding-bottom: 65px; 
 
    padding left: 65px; 
 
    padding-right: 65px; 
 
    font-size: 500%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.no { 
 
    font-stretch: condensed; 
 
    font-size: 20px; 
 
}

<h1 class='adr'> 
 
    A place 
 
    <br> 
 
    <h8 class='ad'> 
 
    4567 postal code An Address 
 
    </h8> 
 
    
 
    <h8 class='no'> 
 
    <p>Phone: 123-456 789 Fax: 123-456 789</p> 
 
    </h8> 
 
</h1>