- ベストアンサー
画像とテキストの間の空白を狭めたい
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ulのほうで margin-top:0; してみて下さい。
その他の回答 (1)
- lesbrers
- ベストアンサー率48% (23/47)
CSSではなく、HTMLソースの問題ではないでしょうか？ <img src="xx.jpg"><br>テキスト で、画像のすぐ下にテキストが来るはずです。 テキストを<p></p>などのブロック要素で囲むと、上下に1行空白行が入ってしまいます。
お礼
すみません。 ちなみに上記のクラス指定は ul.ma { list-style-image: url(333.gif); margin-bottom: 0.5em; margin-left: 20px; } です。
補足
ありがとうございます。 説明不足でした。 下に<ul>で書いているのですが、<ul>自体が空いてしまうタグなのでしょうか？ なんとかこのタグを使ったまま行間の調整はできないものなのでしょうか？ <img src="a.gif"> <ul class="ma"> <li>111</li> <li>222</li> </ul>
関連する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
- divの中央部分にテキストを配置したい
こんにちは。 趣味のサイトを開設しているのですが、今回XHTMLとCSSを使って再構築したいと思い、参考書を買って勉強している最中です。 今までページ内の配置には主にTABLEを使ってきたのですが、それらをdivに変えていこうと思っています。 そこでお聞きしたいのですが、高さと幅をピクセルで指定してあるdivの真ん中にテキストを配置する場合、CSSでどう記述すればいいのでしょうか？ たとえば div#Header { width: 780px; height: 300px; padding-right: auto; padding-left: auto; text-align: center; } とした場合、左右は等分され中央に来ますが、これにtopとbottomを追加しても上下の真ん中には来ませんよね？ この場合は、高さの指定を外して、topとbottomを同じピクセルの数字で指定するしかないのでしょうか？ それとも他に方法があるのでしょうか？ 初歩的な質問ですみませんが、教えて下さい。お願いします。
- ベストアンサー
- HTML
- スクロールバーによって表示がズレます。
下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。（IEはOKなのですが・・・） どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }
- ベストアンサー
- 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
- IE7でfloatしない原因
css初心者です。 テキストの横に画像をフロートさせたいのですが、 IE７のみ、表示が崩れてしまいます。 原因を教えてください。 簡潔に必要な部分だけを書き出すと、 HTMLは以下のようになっています。 <div class="main"> <p class="float">テキスト1</p> <img src="a.jpg" alt="A画像" width="100" height="10"class="a"> <img src="a.jpg" alt="B画像" width="100" height="10"class="b"> <p class="padding"><a href="index.html">テキスト２</a></p> </div> CSSは以下。 div.main { width: 600px; padding:15px; } .float{ float:left; width:100px; } .a { float:left; padding-right:20px; padding-bottom:5px; } .b { clear:left; padding-bottom:5px; } .padding{ padding-bottom:10px; } 表現したいのは、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ このようなレイアウトです。 IE８、Firefox、Chromeでは希望通りのレイアウトになっていますが、 IE７でみると、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ となっています。 また、画像が一つだけ（A画像だけ）のパターンもあるのですが、 この場合には ～～～～～～～～～～～～～～ テキスト１ A画像 テキスト２ ～～～～～～～～～～～～～～ となってしまいます。 A画像とB画像はまったく同じ大きさです。 padding-bottom指定は、各行の行間を開けたくて指定しています。 宜しくお願いします。
- ベストアンサー
- CSS
- ＩＥでテーブル内のテキストが勝手に改行されます。
個人でサイトを運営しているのですが、 外部ＣＳＳをテーブルに適用するとＩＥとＦｉｒｅｆoxで表示が変わってしまい 困っています。問題は下記です。 テーブルに指定するＣＳＳは以下のようなものです。 table.1{ border-top:1px solid #666666 ; border-left:1px solid #666666 ; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; text-align:left; font-size: 10pt; padding:3px; } .1 th{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; color:#330000; background-color:#996633; padding:0.1em 0.1em; text-align:center; } .1 td{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; padding:8px 8px 8px 8px; line-height: 120%; } そして本文のＨＴＭＬです。 <table width="166" border="0" class="1"> <tr> <td colspan="2"><div align="center">テキストテキスト</div></td> </tr> <tr> <td>イメージ写真</td> <td>イメージ写真</td> </tr> <tr> <td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> <td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> </tr> </table> 以上のようなものです。 このようにするとＦｉｒｅｆｏｘではきちんと表示されるのですが、 ＩＥだとテキストの部分が４文字ほどで勝手に改行されてしまい、 かなり縦長のテーブルになってしまいます。 試行錯誤してみたのですが、全然できなくて本当に困っています。 もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。
- ベストアンサー
- HTML
- 画像とその下にあるテキストの隙間を小さくする方法
ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。
- 締切済み
- CSS
- table cellpadding「有」又は「無し」でCSSの解釈違う？
IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>
- 締切済み
- HTML
お礼
できました！ ありがとうございました。