人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

携帯サイトのコーディングで、画像を縦に並べると画像同士の間に1,2pxの余白が空いてしまいます。
この余白を消して、画像同士をピッタリくっつける方法はないでしょうか?

確認した機種:AU Kyocera W44K

●質問者: tenshin42
●カテゴリ:インターネット ウェブ制作
✍キーワード:au W44K コーディング 携帯サイト 画像
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● よたか
●60ポイント

タグとタグの間に改行があると空く時がありますので、改行をなくされてはいかがでしょうか?

あと改行コードをLFにすると直ったりした事がありました。

URLはダミーで私のブログです。

http://blog.hanamarl.com/

◎質問者からの返答

ダメでした。

かなしい・・・


2 ● rouge_2008
●10ポイント

auの仕様のようですね。

他にもauの携帯での表示で、画像と画像の隙間に関して困っている人がいました。

XHTMLではテーブルタグが使用できるので、<table>に「 border="0" cellpadding="0" cellspacing="0"」を指定してはいかがでしょうか?

【例】

<table border="0" cellpadding="0" cellspacing="0">

<tr><td><a href="http://www.xsample.jp/" target="_blank"><img src="image/photo1.jpg" width="120" height="120" alt="Photo1" /></a></td>

</tr>

<tr>

<td><img src="image/photo2.jpg" width="120" height="120" alt="Photo2" /></td>

</tr>

</table>


http://www.au.kddi.com/ezfactory/tec/spec/wap_tag02.html

http://www.atmarkit.co.jp/fmobile/rensai/xhtml03/xhtml03.html



※CSSも試してみたのですが、方法が見つかりませんでした。

margin: 0;

padding: 0;

あるいは

vertical-align: bottom;

あるいは

vertical-align: top;

などを指定してみたのですが、いずれもダメでした。(実機では確認していません。)


3 ● takabi
●10ポイント

画像はインライン要素なので、ベースラインで並べられるため

下に隙間ができているのだと思います。

<img src="************" style="vertical-align:bottom">

上記のように、インラインでstyle属性をつけて画像の基準をテキスト下端に下げてやればよいのでは。

http://www.mozilla.gr.jp/standards/webtips0018.html

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ