下記のhtmlでＢＢＢという文字をＡＡＡ（リンク）の右に20ＰＸのスペ

質問

下記のhtmlでＢＢＢという文字をＡＡＡ（リンク）の右に20ＰＸのスペースを空けて入れたいのですが、どのように書き変えたらよろしいでしょうか？
現在の状態では文字が回りこんでしまい、ＡＡＡ（リンク）の下部にＢＢＢがきてしまいます。
よろしくお願いします。

<A Href="URL" style="text-decoration: none;"><div style="margin-left:30px"><font size="3">AAA</font></div></A>
BBB

回答No.2

ORUKA1951 · ベストアンサー

Aは、
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )より、
　で内部に%inline--行内要素しか持てないです。したがってIEというおかしなブラウザは、BBBにもリンクが有効ですが、まっとうなブラウザは、<div>というブロック要素が現れた時点で、それ以前の行内要素は閉じられたと解釈します。すなわち
<A Href="URL" style="text-decoration: none;"></A>
<div style="margin-left:30px">
　<font size="3">AAA</font>
</div>
<A></A>
と解釈してレンダリングを試みます。

　このブロック要素と行内要素の区別や、それぞれの要素に何を含められるか・・あたりは、まともな入門書には最初に書かれているはず。

　<p>
　　<a href="[URL]">AAA</a><span style="margin-left:30px;">BBB</span>
　</p>

そのまえに、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
あたりをおさらいしましよう。
　それと少し書いたら
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックする。
　そして、書き方が分からないときはいつも
仕様書HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )をチェックする。

回答No.1

neko-ten

divはブロック要素ですので、下に表示されるのは当たり前です。
また、aタグの中にブロック要素を入れるのはルール違反です。

というか、divもfontタグもいらないんじゃないかね。
cssもなぜmargin-leftなんだ・・・？

---CSS---
.RightMarginLink{
margin-right:20px;
font-size:100%;
}

---HTML---
<a href="#" class="RightMarginLink">AAA</a>
BBB

まずはHTMLの基礎勉強されたほうがよいかと。
各要素がどのような性質を持っているか理解されていないように思います。