ブログ掲載の写真と本文のスペースがうまく設定できない

質問

ブログ掲載の写真と本文のスペースがうまく設定できない

写真の左側に　見栄えよく本文を挿入したいのですが
写真と本文の文字の間が詰まってしまいます。
プレビューでは、ＨＴＭＬの通りに表示されるのですが
実際にアップしてみると　反映されていないのです。
ブラウザの問題でしょうか？（ファイアフォックス）

どこが悪いのかご教示ください。

<a href="写真URL" target="_blank"><img src="写真のURL" alt="写真の名前" border="0" width="250" height="218"align="left"hspace="20" Vspace="20"/></a>

回答No.3

zeff · ベストアンサー

一番大事なところをスルーしないでください。

スタイルシートのどこかに
img{margin:0;padding:0;}
もしくは
*{margin:0;padding:0;}
はないでしょうか？

、とお聞きしました。

説明を書いていたら長くなってしまったので、
面倒だったら読まなくても構いません。

※結論※

<a href="写真URL" target="_blank"><img src="写真のURL" alt="写真の名前" border="0" width="250" height="218" align="left" style="margin:20px;" /></a>

（※属性の間をくっつけないで半角スペースを入れてください。）

毎回こうしてください。これならOKのはず。

以下長い説明：

スタイルシートは、ブログ管理画面から
「環境設定」の中の「テンプレートの設定」へ進むと見られます。
「○○○（テンプレート名）のスタイルシート編集」の中です。

まず、スタイルシートでは「後から書かれたほうのスタイルが上書きされる」
というルールがあります。

詳細度については、例えばここの「その２」をご覧ください。
http://park19.wakwak.com/~zashiki/css-make/cascade.html

-----引用ここから
例えば、HTMLのfont要素やalign属性など、スタイルシート以外を用いてのスタイル指定は、詳細度0（これはCSS2の仕様。CSS1では詳細度1）に相当するCSSのスタイル指定に変換され、その変換された指定はHTML文書作成者のスタイルシートの先頭にあるものとされます。（これによってスタイルシート以外でのスタイル指定は、スタイルシートのスタイル指定で上書きできます）
-----引用ここまで

つまりhspaceやvspaceでのスタイル指定は
スタイルシートの先頭にあるわけですから、
その後ろに
*{
margin:0;
padding:0;
}
（*：全称セレクタ：全ての要素に適用される）
や、
img{
margin:0;
padding:0;
}

もしかすると
a img{
margin:0;
padding:0;
}
と書いてあるかもしれません。

が存在することになり、
全称セレクタの詳細度：０＝hspace/vspaceの詳細度：０
かつ全称セレクタの方が後に書かれているので、
上書きされて余白が0になってしまうのです。

それが無く、
img{
margin:0;
padding:0;
}
だけであっても、
img{}の詳細度：１なので、上書きされます。

これらはCSSの最初の方に存在して初期化を行なっており、
あとは普通、
img.hoge{
margin:20px;
}
などとclassを使って行ないます。

でもインラインスタイルでやるのが簡単かもしれない。
というわけで最初のやり方：

<a href="写真URL" target="_blank"><img src="写真のURL" alt="写真の名前" border="0" width="250" height="218" align="left" style="margin:20px;" /></a>

（※属性の間をくっつけないで半角スペースを入れてください。）

になるわけです。

border="0"やalign="left"も本当はスタイルシートでやるべきなんですが、
こんがらがるので、余白に絞って直しました。

お礼

詳しい説明ありがとうございました！

結論部分を読んで問題解決しました！
ありがとうございました。

回答No.2

zeff

＞hspace/vspace属性の詳細値：０
は、
hspace/vspace属性の詳細度：０
の誤りです。

あと、
そもそもXHTMLでは
border属性、align属性、hspace属性、vspace属性は非推奨なはず。
CSSでやりましょう。
target属性は使わないように御達しがあったような。

それと/>の前に要半角スペース。
半角スペース・スラッシュ・閉じタグ。

補足

早々にアドバイスありがとうございます。
ですが、初心者のため　アドバイスの最初の4行の意味がわかりません…

ＦＣ２ブログを利用しているのですが、質問に書いたＨＴＭＬの
align="left"hspace="20" Vspace="20"　（←私が書き足した部分）
以外の部分は、FC2で画像を挿入すると　このようになります。

⇒それと/>の前に要半角スペース。
　半角スペース・スラッシュ・閉じタグ。

　これはわかりました。ありがとうございます。

回答No.1

zeff

スタイルシートのどこかに
img{margin:0;padding:0;}
はないでしょうか？
もしくは
*{margin:0;padding:0;}

hspace/vspace属性の詳細値：０　＜ img{}の詳細度：１

によって上書きされているのでは。