- ベストアンサー
テーブルの下に余白を100px作りたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
paddingは領域内の余白ですけど、意図と合っていますか？普通はtdやthにpaddingを指定すると思いますが。 表が終わった直後に余白を設けたいのであれば、領域外の余白＝marginを指定すべきです。
その他の回答 (1)
- tracer
- ベストアンサー率41% (255/621)
簡潔に答えるならこうです。 margin-bottom: 100px 詳しいことはリンクを貼っておきますね。 http://creator.aainc.co.jp/archives/5952
関連するQ&A
- テーブルの中の下には少し空白を入れたい場合
table[summary="回答"] td{ padding:0px 5px; } これで上下左右に空白を入れられますが、 テーブルの中の上には空白を入れたくなくて、 テーブルの中の下には少し空白を入れたい場合どうすればいいですか？ table[summary="回答"] td{ padding:0px 5px; } これだと上下どちらも空白がなくなるので、 table[summary="回答"] td{ padding:0px 5px; margin-bottom:20px; } にしたのですが、 margin-bottom:20px; は適用されてません。
- ベストアンサー
- CSS
- paddingはテーブルに対して行えないの？
cssのpaddingはテーブルに対して行えないのでしょうか？ table[summary="table_あ"] { text-align: center; padding: 20px 0px; } というcssを設定すると text-align: center; は適用されているのに padding: 20px 0px; は無視されます。 http://www.tagindex.com/stylesheet/table/padding.html を参考にしたのですが、 もしかして、 tableでpaddingは使えないのでしょうか？ 上下のみ空白が欲しいので20px 0pxとしました。
- ベストアンサー
- HTML
- table[summary="table_1"]
table[summary="table_1"] td,th{ padding: 5px 10px; } とスタイルシートで設定した場合、 <table summary="table_2"> のthには、 padding: 5px 10px;は適用されないですよね？ 上記のcssでthタグにpadding: 5px 10px;が出来ようされるのは、 "table_1"だけですよね？
- ベストアンサー
- CSS
- tr 無視されます padding
テーブルに対してcssで table[summary="トップページ"] tr{ padding:30px 30px; } は効かないのですか？ table[summary="トップページ"] th{ padding:30px 30px; } や table[summary="トップページ"] td{ padding:30px 30px; } は適用されますが tr だけが無視されます。
- ベストアンサー
- HTML
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- cssを一つにまとめる事はできますか？
table[summary="テーブル"] th{ padding:0px 0px; } table[summary="テーブル"] td{ padding:0px 10px; } という、cssを一つにまとめる事はできますか？ table[summary="テーブル"] th,td{ padding:0px 0px; } とすると、うまく表示されません。
- ベストアンサー
- CSS
- テーブルのセル間に余白が空いてしまいます
2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。 しかし、画像と文字の間（1列目と2列目の間）に余分な空白ができてしまいます。 margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。 htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか？ また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。 divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。 <!-- htmlのコード --> <body> <table width="700" border="0" > <tr> <td><center> <img src="img/top_image.png" /> </center></td> </tr> <table class="table001"> <tr> <td rowspan="2"><img src="img/aaa.bmp" /></td> <td><h2>このサイトのごあんない</h2></td> </tr> <tr> <td><p>このサイトは～～～～～～</p></td> </tr> </table> <div style="margin-top:10px"></div> <table class="table001"> <tr> <td rowspan="3"><img src="img/bbb.bmp" /></td> <td><h2>このサイトのごあんない２</h2></td> </tr> <tr> <td> <p>このサイトは～～～～～～</p> <p>また、このサイトの～～～～～～。</p> </td> </tr> <tr> <td> <p>問い合わせ</p> <p>電話番号 000-000-0000</p> </td> </tr> </table> </body> /* CSSのコード */ body { background-color:#6C6; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; font-size: 0.8em; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic",sans-serif ; } #pageBody { width: 760px ; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: #FFF; } table.table001{ background-color: #E8FECF; width: 700px; margin-left: auto; margin-right: auto; white-space:normal; } h2{ padding-left: 10px; background-color: #009900; width: 180px; color:#FFF; font-size: 1.1em; height: 25px; line-height:25px; }
- ベストアンサー
- HTML
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- 画像の下に余白が出来てしまいます。
どんなにがんばっても下に余白が出来てしまいます。余白を消す方法を教えてください、お願いします。 多分、何か余計なもののせいで余白ができてるんだと思います。 css ↓ *{ margin:0;padding:0; font:normal 10px/16px Verdana; color:#000; letter-spacing:0.2em; } /*リンクの設定*/ a {text-decoration:none;} a:hover {text-decoration:underline;} /*改行・画像の設定*/ br {letter-spacing:normal;} img {border:0;} /*見出しの設定 h1…サイトタイトル h2…welcomeなどの見出し*/ h1 { color:#fff; font:bold 16px Verdana; } h2{ font:bold 10px Verdana; } /*右側のフレームの背景設定*/ body{ background:#fff url(img/imgr.jpg) no-repeat left bottom fixed; } /*左側、メニューの表示されるページのみに適用される背景設定*/ #INDEX{ background:#666 url(img/imgl.jpg) no-repeat right bottom fixed; } /*左側フレームの各種設定*/ #CONTAINER { margin:40px 20px 0 0; text-align:right; } #MENU { margin-top:20px; } #MENU a{ color:#fff; font-size:120%; line-height:25px; } #MENU a:hover{ color:#fff; text-decoration:none; } /*右側フレームの各種設定*/ #BOX { margin:40px auto; width:55%; } .text{ margin:5px 0 20px 10px; } .record{ margin:5px 0 20px 10px; height:200px;width:400px; overflow:auto; } html ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Clock hand</title> <tr valign="top"> </tr> </head> <body leftmargin="0" scroll="no" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> </tbody> </table> <table style="width: 188px; height: 693px" width="188" background="http://tokiokalink.web.fc2.com/imgl.jpg" align="left" height="693"> <tbody> <tr valign="top"> <td> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <meta content="text/css" http-equiv="content-style-type" /> <link rel="stylesheet" type="text/css" href="style.css" /> <base target="main" /> <div id="CONTAINER">
- 締切済み
- HTML
