文字と文字の間をそんなに開けたくない。

質問

【css】
p.title{
font-size:1000%;
text-align:center;
}

【HTML】
<p class="title">test</p>

としたときに、
testという文字の下がすごくあいてしまいます。

こんなに空白を表示させたくないため、
display:inline;
を付け加えたのですが、
そうするとなぜか
text-align:center;
が適用されなくなります。

text-align:center; を適用しつつ、</p>の後にこんなに改行させないためにはどうすればよろしいでしょうか？

回答No.2

ORUKA1951

<p class="title">????タイトルなら<h1>～<h6>じゃないのですか??というよりそうすべきです。
<h1>タイトル</h1>
に対して、
h1{font-size:10em;margin:0;}
で良いです。
　CSS（カスケーディング スタイル シート）はカスケーディングの仕組みが極めて有用だから利用されるのですから、カスケーディングを活用できなければ意味無いです。
1) まずHTMLで文書構造だけを詳しくマークアップします。
　　文書を構成する要素(Element)に分解して、ひとつひとつをタグでマークアップする。
　　タイトル--見出しは<h1>～<h6>を段落なら<p>と・・・
　　用意された要素では文書構造が示しきれない時にidやclassを併用する。(あくまで文書構造を補完するため)
　　それで著者にも機械にも検索エンジンにもその文書のタイトルがどれか、どこからどこまでが段落かがわかる。

display:inlineは、その要素を行内要素に変更します。
※ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )は極めて重要な概念です。理解しておきましょう。

p.title{}とは、class属性の値リストに"title"というテキストを含むp要素と言う意味
display:inlineとは、その要素を行内要素にするということ。言い換えると
<div>
　<p class="title">タイトル</p>
　<p>あいうえお</p>
</div>
　↓
<div>
　<span>タイトル</span>
　<p>あいうえお</p>
</div>
とせよということ。次にp要素がくるのでspanは匿名ブロックに囲まれる。---あまりよくない。
＞こんなに空白を表示させたくないため、display:inline;を付け加えたのですが、
　必ずしも行間は開きません。匿名ブロックが作られるためブラウザによったら間隔は飽いたままになる。
　また、当然、行内要素にはtext-align:centerなんてないです。幅自体が内容の大きさに依存するからです。
　インラインレベル要素とインラインボックス( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#inline-boxes )

※空白ではなくマージンと言います。前後にマージンを取りたくないということ
　これは、HTMLが元々欧文を想定しているために日本語を使用する場合、
・行間が詰まってみえること
・段落の変わり目がマージンではなくインデントのほうが良い
　などの理由から、私は次のようにタイプセレクタで指定しています。

p{line-height:1.6em;margin:0;text-indent:1em;}

見出しに関しては、本文中の<h2>～<h6>に関しては子孫セレクタを使って
div.section h2,div.section h3,div.section h4,div.section h5,div.section h6{margin:0;line-height:1.6em;}
とか・・
　その上で、ページタイトルなどは

HTML5では、各要素の目的が強く厳密性が求められます。見出しは必ず<h1>～</h1>というふうに。以前のHTMLでは、文書構造を示す要素がないためにDIVやSPANにid,classを併用して文書構造を示してきましたね。<div class="section">ここから本文</div>
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　HTML5は、(文書構造を示す要素が追加されたため)まず最適な要素を探してそれを使用する。それがないときの最後の最後の手段としてDIVを使う。

＞text-align:center; を適用しつつ、</p>の後にこんなに改行させないためにはどうすればよろしいでしょうか？
　タイトルですから
<h2>タイトル</h2>
として
h2{
margin:0;line-height:1.6em;text-align:center;
background-color:navy;color:white;
}
　これで、見出し(h2)は、上下左右の中央に配置され、紺色地に白文字で表示されるはずです。

回答No.1

sanzero

こんにちは。

文字と文字の間というより、行間ではないでしょうか？

おそらくpのmarginが影響していると思いますので、titleクラスに

margin-bottom:0px:

など加えてみては。

ちなみにブラウザにはデフォルトのスタイルがあります。
ですので、そういったデフォルト効果をリセットするためのCSSを最初に読み込むということがよくあります。
今回の場合もデフォルトのスタイルが影響していると思います。

F12を押すとデベロッパーツールが表示されると思いますので、どういうスタイルがあたっているか確認できますので、使い方を覚えられるとよいでしょう。