- 締切済み
要素間、要素内に隙間が空く
CSSを組んでいて、どうしても理由がわからない現象が２つあります。以下のソースは簡略化しています。 １．隣接する要素間に隙間があく <header> <div id="branding">...</div> <nav id="access">...</div> </header> となっており、 div#branding,nav#access {margin:0;padding:0;} を指定しているのに、両者に隙間があいてしまいます。（floatなども指定していません） ２．<div>内の要素の<table>の上部にだけ隙間があく <aside id="sidebar"> <div id="calendar_wrap"> <table>...</table> </div> ： </aside> となっていて、 table { margin:0; padding:0; } と指定しているのに、tableの上部にだけ隙間があいてしまいます。他にtableに関してスタイルを指定している箇所はありません。 インスペクタで見ても、謎の空白があるだけです。positionは全てstaticで、明示的に位置を指定するようなこともしていません。その他の部分は同じように指定しているのに、これら２つだけが意図しないように表示されてしまいます。 一般論として、どのような場合にこのようが現象が起こりうるのでしょうか。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞html,body,div,span,applet,・・・【中略】・・・video {padding:0;border:0;margin:0;} ＞と最初にリセットされてあり（ここまで書く必要があるのか？と疑問に思っていますが） まったくですね。結局また書き足さなければならない。 基本的にはfirebugで分かるとは思うのですが・・・・。それぞれのブロックの内部にあるすべての要素のmarginを調べてみる。 それ以外の原因としては改行コードやタブなど・・その前後を選択して[選択部分のソース]で確認する。 私はスタイルシートはすべて自分で書いています。それでも不都合があればHTMLのテンプレート自体書き直す。最終的にはそれが一番早かったりして・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5のようですが・・・折角のHTML5なので、DIVは多用しないように!! とても重要です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より 直訳: 著者は他に適当な要素がない時の最後の最後の手段としてdiv要素を使用することを強く推奨する。div代わりにより適切な要素を使用する事は、読者のためには、より良いアクセシビリティを、著者には容易なメンテナンス性を与える。 HTML5でも<aside id="sidebar"><div id="calendar_wrap">なんてのは使わないです。 sidebarとは、横にバーとしてデザインしたいと言うことでしょうが、デザイン--プレゼンテーションに関わる事はHTMLには書きません。wrapは包むためでしょうがこれも同様です。 将来。あるいはスマホ用に横並びにしようとしたときに早速困ることになる。単に<aside>でよいはず。 asideとは、本文に直接関連しない内容を示す要素です。 ＞インスペクタで見ても、謎の空白があるだけです。 製作なら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、そのアドオンの Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使われると、どの要素が関わっているか分かるはずです。 スタイルシートにおいて、marginは要素をまたがって適用されます。 <header> <div id="branding"> <h1>見出し</h1> </div> <nav> <h2>ナビゲーション</h2> <ol> <li>リンク</li> </ol> </nav> </header> <section> <h2>本文見出し</h2> <p>記事</p> <aside> <h3>未関連情報</h3> <table><tr><td>テスト</td></tr></table> </aside> </section> <footer> <h2>文書情報</h2> <address>連絡先</address> </footer> において、 header{background-color:aqua;} header nav{background-color:;} section{background-color:silver;} section aside{background-color:yellow;} footer{background-color:fuchsia;} と色分けして header,section,footer,header nav,section aside{margin:0;} としても隙間は開いてしまいます。 header,section,footer,header nav,section aside{margin:0;padding:5px;} としても、一部開いてしまいます。 一方 header,section,footer,header nav,section aside{margin:0;padding:5px;border:solid 1px gary;} あるいは、 h1,h2,h3,ol,li,p{margin:0 auto;} としても消えるはずです。 その隙間を作っているのは、それぞれの要素内にあるマージンを持つ要素によるものです。 ・paddingを適当に取る ・背景と同色のborderを引く ・内部要素のマージンをなくする ・・読みにくくなるのでline-heightを大きめにしましょう。 などの対策が必要になります。 【テスト用サンプル】firebugで確認してみましょう。 ★タブは＿に置換してあるので戻す。 ★文字コードはUTF-8 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みHTML5 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- /* 分かりやすいように色分け */ header{background-color:aqua;border-color:aqua;} header nav{background-color:lime;border-color:lime;} section{background-color:silver;border-color:silver;} section aside{background-color:yellow;border-color:yellow;} footer{background-color:fuchsia;border-color:fuchsia;} /* 本題部分 */ header,section,footer,header nav,section aside{ margin:0;padding:0; /* 下の何れかのコメントアウトを外す */ /* padding:5px; */ /* border-style:solid;border-width:1px;*/ } /* その後でデザインしてみる、下のコメントを外す */ /* html,body{margin:0;} header,section,footer{width:80%;margin:0 auto;min-width:470px;} section{min-height:400px;position:relative;} section aside{position:absolute;top:0;right:0;width:200px;height:100%;} section h2,section p{margin-right:210px;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p>記事</p> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿＿<table><tr><td>テスト</td></tr></table> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿＿<address>問い合わせ先</address> ＿</footer> </body> </html>
お礼
補足で少し書き間違いがありました。HTMLはWordPressが出力しますが、CSS自体はstaticなファイルなので、それを修正しようとしています。 HTML5に関してはそれほど詳しくなかったので勉強になりました。自分でコードを書くときには気をつけることにします。バリデーターサイトもThe W3C Markup Validation Serviceしか知らなかったので参考になりました。 詳細なアドバイス、ありがとうございました。
補足
実はHTMLというCSSのソースは自分で書いたものではなく、WordPressが出力したものなのです。その表示がおかしいのでCSSファイルを修正しようとしているのですが、原因がわからない状態です。CSSでは、 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {padding:0;border:0;margin:0;} と最初にリセットされてあり（ここまで書く必要があるのか？と疑問に思っていますが）、その後にセレクタに対してmarginやpaddingを設定しているようです。他の箇所は正常に表示されているのですが、質問に書いた２箇所だけ表示がおかしい状態です。 インスペクタは、Chrome,Firefox,IEのそれぞれの開発ツールを、それぞれ長所、短所があるので使い分けながら解析していますが、どうしてもボックスモデルで説明できない隙間があり、何か自分の不勉強な部分があって、marginやpadding以外に要素間に隙間が入る理由があるのだろうか、と思って質問させていただきました。 W3C CSS Validation ServiceでチェックしてもCSSに問題はないし、特定のブラウザのレンダリングエンジンに問題があるわけでもないし、頭を抱えています。（HTMLに関してはバリデーターでエラーが多発しましたが、今回の箇所とは関係ないようです） もう少しいろいろ調べてみようと思います。 ちなみにWordPressのソースをgrepしたら、 $ grep -r calendar_wrap | grep -v css wp-includes/default-widgets.php: echo '<div id="calendar_wrap">'; $ grep -r '<aside id="sidebar">' wp-content/themes/startupwp/sidebar.php:<aside id="sidebar"> と出るので、<aside id="sidebar">の方はテーマの作者が書いたコードのようですが、<aside id="sideabar">はWP本体に組み込まれているようです。（WPは最新版です） WordPressもまだまだ発展途上のようですね。