見出しの上下の余白を削除したい
はじめに
以下のインラインフレーム内のサンプルをご覧ください。
見出しの上下に水平線を引くと、このように隙間ができますよね？
この隙間をとりたい場合は、スタイルシートで段落の調整をすると解決します。
見出しの周りの余白をなくすには？
「見出しの上下の余白を削除したい」の段落は<h1>タグを使っています。
しかしながら、その下のパンくずリストは<p>タグです。
<p>タグであれば、前後の隙間が空きますよね？ しかし前後左右の隙間はありません。
実際には、このように設定されています。
h1{border-bottom:1px solid #5F5FAF; font-size:1.4em;margin:0px;}
FrontPageでは0と入って単位が入らないため、手打ちで単位を入力しています(笑)
余白を削除するための設定方法
- スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
- スタイルツールバーの[スタイル]をクリックします。
- スタイルを設定したい見出しタグを選択して、[変更]ボタンをクリックします。
- [スタイルの変更]ダイアログボックスの[書式設定]ボタンをクリックし、一覧から[段落]をクリックします。
- [段落]ダイアログボックスの[スペース]設定オプションで
「段落の前」に「0」と指定すると、真上のスペースがなくなり、(margin-top:0)
「段落の後」に「0」と指定すると、真下のスペースがなくなります。(margin-bottom:0)
「テキストの前」に「0」と指定すると、左側のスペースがなくなり、(margin-left:0)
「テキストの後」に「0」と指定すると、右側のスペースがなくなります。(margin-right-0）
すべて隙間をなくしたい場合は、すべて0と指定しましょう。
※ただし、単位も入れておかないと他のブラウザでは無効になりますので注意してください。
スポンサーリンク
INDEX
問題は解決しましたか？
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！
2012年12月21日（日本時間）をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。
