<h1>タグの後の改行を削除しますか?


92

<h1>タグの後に改行を削除すると問題が発生します。印刷するたびに改行が追加されるため、次のように<h1>Hello World!</h1> <h2>Hello Again World!</h2>印刷されます。

Hello World!

Hello Again World!

CSSでどのタグを変更する必要があるかわかりませんが、パディングやマージンと関係があると思います

できれば、垂直方向のパディングも維持したいと考えています。

回答:


152

インラインとしてフォーマットしたいようです。デフォルトでは、h1およびh2は行の幅全体にわたるブロックレベルの要素です。次のようにcssにインライン化するように変更できます。

h1, h2 {
    display: inline;
}

ここでの違いを説明記事だblockinline、より詳細には:http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

垂直方向のパディングを維持するにはinline-block、次のようにを使用します。

h1, h2 {
    display: inline-block;
}

9

<h1>タグが{display: block}設定されました。それらはブロックレベルの要素です。これをオフにするには:

{display: inline}

デフォルトでは、hタグにマージンとパディングを使用しているため、これらを削除する必要があります
Adeel Mughal

可能な場合は、垂直方向のパディングも保持したいので、display:inline;を試しましたが、垂直方向のパディングはありません。
Jack Wilsdon、2012

1
パディングとマージンを削除しても、新しい行は削除されません。新しい行は、それらがブロックレベルの要素であるために発生します。つまり、それらは、デフォルトで、表示されるすべての水平方向のスペースを占めます。したがって、フロートを実行したり、表示やその他のプロパティを変更したりしない限り、h*タグの後には常に改行があります。
tkone

@JackWilsdon Ben Leeは、垂直方向のパディングを簡単に維持する方法を示すように既に更新されているので、編集後に私も気になりません。
tkone

2

htmlスタイルセクションでh1マージン値をマイナスに設定することで、この問題を解決しました。それは私のニーズにぴったりです。

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

2
これは、改行の代わりに垂直パディングを削除するために機能します。
16

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.