
こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。
参考までに、DreamWeaver(ドリームウィーバー)2004MXです。
画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。
間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。
例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。
こういう場合って、何かやり方があるのでしょうか。
もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。
また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。
やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。
No.3ベストアンサー
- 回答日時:
HTMLの初歩です。
具体的には、-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">
上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。
naokitaさん、有難うございます。
この方法はどの画像にも個別に適用できて、実に快適なので、
大変参考になりました。
また、四方の順番は時計回りと覚えれば良いことも分かりました。
単位もpxなのですごく扱いやすいです。
丁寧なご回答、本当に有難うございました!
No.2
- 回答日時:
marginやpaddingを使うといいわ。
marginは隣のものと距離を取るスタイルよ。
┌─┐┌─┐
│A ││B │
└─┘└─┘
Aの右にmarginを取ると
┌─┐ ┌─┐
│A │ │B │
└─┘ └─┘
になるわ。
paddingは余白を作るスタイルよ。
┌─┐┌─┐
│A ││B │
└─┘└─┘
Aの右にpaddingを取ると
┌──┐┌─┐
│A ││B │
└──┘└─┘
こうなるわ。
画像に余白を追加して、の処理に近いのはpaddingね。
早速のご回答有難うございます。
図解でご説明いただけて大変参考になりました。
marginのほかに、paddingという概念もあったのですね。
今後、ますます学習していきたいと思います。
有難うございました!

No.1
- 回答日時:
marginを使いましょう。
margin-top(bottom,left,right)で、各方向への余白が制御できます。
参考URL:http://www.tagindex.com/stylesheet/img/margin.html
早速のご回答有難うございました。
margin-top(bottom,left,right)などで制御するのですね。
早速取り入れてみたいと思います。
有難うございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssで文字サイズ指定、ptでもpx...
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
クロームとサファリでスクロー...
-
<div>と<div>の間の10px程の...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
テーブル内の画像をマウスオー...
-
モーダルダイアログでのボタン...
-
safariでの横並びリスト(List...
-
入力フォームとセレクトボック...
-
CSS(0の単位)について
-
CSS検証サービス
-
CSSで背景色を下まで表示させたい
-
ドロップダウンメニューが隠れ...
-
<li>タグの数が増えすぎたので...
-
divタグ内のコンテンツが重なっ...
-
複数のボタンを等間隔に、かつ...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
<div>と<div>の間の10px程の...
-
htmlでheightが自動で延長
-
画像リンクの下に文字を付けた...
-
ネガティブマージン
-
table周辺の隙間をなくしたい。
-
入力フォームとセレクトボック...
-
定義リストに下線をつけたいと...
-
ライトボックスでスクロールバー
-
footer を横幅いっぱいに広げる...
-
CSSについて。このサイトの背景...
-
テーブルのセル間に余白が空い...
-
XHTML+CSS で、ブラウザごとに...
おすすめ情報