- 締切済み
要素間、要素内に隙間が空く
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）
- 専門家の回答
関連するQ&A
- CSSでボックス内の隙間が消えない
MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。 しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。 お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }
- 締切済み
- HTML
- WinIE5でリストに隙間ができる
WinIE5で下記のCSSを実行すると、なぜか文字の下に隙間が出来てしまいます。 WinIE5.5、WinIE6等では隙間は出来ません。 なにかうまく解決する方法はありませんでしょうか。 よろしくお願いします。 ------------------------------ #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { margin: 0; padding: 0; background: #e0861e; width: 100px; } <div id="nav"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </div> ------------------------------
- 締切済み
- HTML
- float を使うと隙間ができる
左サイドバーのサイトを構築するのですが、 float を使うとmain とleft の間に隙間ができます。 margin=0にしても隙間ができます。この隙間を埋めるにはcontent の幅をぴったり合わさったサイズにするしかないのでしょうか？ それともっと深刻なのは、グーグルクロムでみると leftとmain の高さが揃わず、leftが下がって上部との間に 隙間ができます。margin=0 にしても、heightを指定しても まったく隙間は消えません。 <div id="content"> <div id="main"> </div> <div id="left"> </div> 良い改善方法を教えてください。
- ベストアンサー
- CSS
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- HTML5のsection,articleについて
１．sectionについて h2とh2に関する記事pがある場合 <section> -<h2></h2> -<p></p> </section> でいいですよね？h2はsectionの外・・・ではないですよね？ （<div id="section">的に使う） 2.article/asideについて <article> -コンテンツ -<aside>関連ないもの</aside> </article> みたいに「article内」でasideを使い除外していいのでしょうか？ （<div id="container">的に使う） 3.全体として <article id="container"> -<h1></h1> -<aside> --<header></header> --<nav></nav> -</aside> -<section> --<h2></h2> --<p></p> -</section> -<aside> --<footer></footer> -</aside> </article> ではどうなんでしょうか？ header/nav/footerを除外するかどうか h1をロゴ・会社名にせず、サイト上部の１行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
- ベストアンサー
- HTML
- ADOBE DW 5.5 ヘッダとコンテンツの隙間
現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、 headerとcontentの間に10pixcelほどの隙間ができてしまいます。「デザイン」ビューには 表示されないのですが、「ライブ」ビューやIE9やchromeでも隙間ができてしまっています。 これを防ぐ方法はなにかありませんでしょうか？コードは下記となります。 【HTML】--------------------------------------------------------- <html> <body> <div id="container"> <div id="header"> <img src="a.png" width="1000" height="150"> </div><!-- /#header --> <div id="content"> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div><!-- /#content --> </div><!-- /#container --> </body> </html> 【CSS】--------------------------------------------------------- body{ background-color: #CCC; font: 16px/24px 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; color: #000; } #container { margin:0 auto; width: 1000px; } #header { margin: 0 auto; padding: 0 auto; } #content { width:1000px; margin: 0 auto; padding: 0 20; background-color: #666; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- htmlのtableレイアウトについて
こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に <TABLE style=" border:0px;padding:0px;margin:0px; ｗｉｄｔｈ:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！
- 締切済み
- CSS
- CSSでfloatした要素の高さを100%にしたい
はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html>
- ベストアンサー
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- 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もまだまだ発展途上のようですね。