質問: table周辺の隙間をなくしたい。 ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。 margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ieはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。 ***** test_06.html ***** 只今お勉強中! ! | | | | --- | --- | | | | ***** test_06.css ***** body { margin-top: 0px; text-align: center; background: url("header_back.gif") repeat-x; background-color: #cbe5ff; } img.header { margin: 0px auto; width: 820px; display: block; } table { margin: 0px auto; width: 860px; background: url("wrapper_01.gif") repeat-y; } td { margin: 0px; padding-left: 20px; width: 352px; float: left; } img.logo { width: 352px; margin: -3px 0px -3px -3px; }
回答: ざっと質問と回答の経過を見たところ、各回答者様からのアドバイスを「正しく組み合わせた修正」さえしていれば、既に解決に至っていたのではないかと思われますが... 現状がどうなっておられるのかわからないので、とりあえず今回はano.5の補足で質問者様が書かれているhtml(test_06.html)&css(test_06.css)が最終ヴァージョンと仮定した上で、htmlのサンプルはそのままで、cssの方のみ修正を加えてみました。あくまで現在のhtml(test_06.html)の文書構造に手を加えないで...という事なら、cssを下記の様に変更すればお悩みの症状は改善されると思います。 検証環境はie6/7、firefox2/3、safari3、opera9.61、google chromeです。 --------------------------------------------------------------------- 【test_06.cssの修正版】 --------------------------------------------------------------------- body { margin-top: 0px; background: url("header_back.gif") repeat-x #cbe5ff;←(特に分ける意図がないのであれば)background-color属性もまとめた方がすっきりします } div.main { margin: 0px; padding: 0px; text-align: center; } img.header { display: block;←★ブロック要素化 width: 820px; margin: 0px auto; } ※"padding: 0px;"は(初期値が0なので)不要。 table { margin: 0px auto; width: 860px; border-collapse: collapse;←★このプロパティを指定しないと、初期値が分離モデル"separate"の為、セルの間隔が0ではなくなり(tdとtdとの間に更に見えない隙間の様なものができる仕様と思っておいて下さい。paddingとは別物です。)、今回のスタイルには不都合と思われます。 background: url("wrapper_01.gif") repeat-y; } ※"padding: 0px;"は(元々paddingは与えられていないので)不要。 ※"border-spacing: 0px;"は、border-collapseプロパティの値が"separate"の時だけ有効であり、またieでは実装されていないので今回は不要。 ※tr {~}の指定部分は丸ごと削除。trはmargin及びpaddingプロパティの適用対象にならないので、無効。 td { padding: 0px 0px 0px 20px; width: 352px; } ※tdはmargin及びfloatプロパティの適用対象にならず無効なので、それらを削除。 img.logo { width: 352px; } ※"margin: 0px;"、"padding: 0px;"は(それぞれ初期値は0なので)不要。 --------------------------------------------------------------------- 本件の現象の直接の原因は、★の部分のみですが、←や※で示した箇所は、オリジナルのcssに不足していた指定及び不要(無効を含む)な指定ですのでこの際修正された方が宜しいでしょう。 > ieでは、ヘッダーの画像とテーブルの間の隙間は解消されているようです。テーブルの内部で、画像との間に隙間が生じているようです。 ano.4様の「3 ! と続けてみる。(間に空白も改行も入れない)」をhtml側に適用したのだとしたら、![]()と の2要素間に改行コードが入らないので、その結果「ヘッダーの画像とテーブルの間の隙間は解消」されたのでしょうが、border-collapseプロパティが指定されていなかったのでieでは初期値である"border-collapse: separate;"と実装されていない"border-spacing: 0px;"の組み合わせとなってしまっていた為、セル間の隙間が全くの0ではなくなり「テーブルの内部で、画像との間に隙間が生じて」いたのでしょう(ano.2様とのやりとりで疑問に思われていた問題は、これに依るものです。)。 ちなみに、上記の★で追加した様に、img.headerをdisplayプロパティでブロック要素化しておけば、最初のサンプルの様に![]()と の2要素間に改行コードが入ったhtmlソースであっても「ヘッダーの画像とテーブルの間の隙間」はできません。 何故か...という説明は省略させて頂きますので、ご興味があったら「ブロック要素/インライン要素」などのキーワードで調べてみて下さい。(x)html文書を正しく理解する為の最も重要なポイントの一つです。 「ブラウザ次第で隙間の大きさが違うのに困っています。」については、確かにそういう場合もないわけではないすが、「隙間をなくす」というこの程度のスタイルであれば、指定が適切であれば主要モダン・ブラウザブラウザ間の差は吸収できます。本件においてはやはりcssの各プロパティの指定が適切ではなかった事が原因です。 それから、cssに対する正確な理解がかなり不足しておられる(例えば質問者様のオリジナルの指定の様に、実際にtdがfloatできたりしたら大変な事になってしまいますよ...)様に見受けられますので、ちょっと混乱されてしまったのではないでしょうか。一度cssの仕様を段階を踏んで学ばれておく事をお奨めします。覚えるまでは、各プロパティがどの要素の適用対象になっているかを確認しながらスタイルを設定して行く習慣を付けておく方がいいですよ。 あとは補足というか蛇足です。ano.1様とano.3様の”bodyの直下にimgは置けない”というご指摘は、質問者様の現在のhtml文書がano.5の補足にある通りのdoctypeであるならば、質問者様が「文法チェックもしてみましたが、これでエラーは出ない」とレスされた通り、違反ではないですね。another html-lint gatewayでもパスします。ただし、これよりより厳密な文法を必要とするdoctypeでは違反ですので、今からでもimgに対して某かの子要素として位置づけられるマークアップを意識されておいた方がベターかとは思いますが(例えばこの場合であれば、画像のネーミングからして「見出し(タイトル)」の様に思えますので、もしそうであればという様に。)。 それから、現在のロゴを収めるテーブルのマークアップについて色々やりとりがある様ですが、実際にこのtable部分に入る他の要素の情報が不足している以上、このマークアップが(少なくとも現段階の情報では)適切か否かは判断できません。ただ、もし真実「表」が相応しい内容でなかった場合は...次の機会にでも見直されてみるのがいいですね。勿論、「表」が相応しい内容であるならそのままで結構です。