ホームページの記述について。左寄せを解除する場合。<p style="clear:right;"></p>と, <div style="clear: both;"></div>の違いは? 初歩的な質問にて失礼します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/10/05 08:35:56
  • 終了:2014/10/09 18:18:03

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4504ベストアンサー獲得回数18702014/10/05 09:28:10

スタイルの "clear: both;" は、"float: left;" と "float: right;" の両方を解除します。
スタイルの "clear: right;" は、"float: right;" を解除します。"float: left;" を解除しません。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear
http://msdn.microsoft.com/en-us/library/ie/ms530747.aspx



clear スタイルは、ブロック要素で有効に働くので、float の解除という意味では、<div> につけても <p> につけても効果は同じです。
ただ、中身(content)が空の <div> と <p> を比べると、デフォルトのスタイルの場合、<p> には margin がついてて、<div> にはついていないのが普通なので、<p style="clear: right;"></p> を使うと、空行が挿入されたように見えます。

http://jsfiddle.net/k9jbzjcy/

他1件のコメントを見る
id:a-kuma3

id:torimaki さんのサイトでは、p タグのマージンは、以下のように指定されています。
http://tsurumaki-office.com/wp/wp-content/plugins/biz-vektor-neat/css/neat.css
margin: 0px; ――― 138 行目
margin-bottom: 20px; ――― 334 行目

試された記事では、

<p style="clear: left;">このように、写真に対して、文章は右側にレイアウトされる。<br />
(スマホでご覧のばあい、その限りではなりません。<br />
したがって、文意が伝わりにくくなっています。す、すみませんっ!)</p>

のような書き方になっているので、「す、すみませんっ!)」の下に、20px の空きができます。
これを、中身が空の p タグに clear の指定をすると、

<p style="clear: left;"></p>このように、写真に対して..

「このように、」の上に 20px の空きができます。

div タグの方は、

<div style="clear: both;">吾輩は猫である。<br />
  ...
自分勝手で、おせっかいな生き物である。</div>
<p>&nbsp;</p>

clear を指定した div を閉じた後に、<p>&nbsp;</p> があって、それが行の高さ line-height と margin-bottom 分の空き(ほぼ、2行くらいに見える)を作り、次の「その外に、左寄せを解除するためには、」の文に続きます。

2014/10/06 18:03:11
id:torimaki

a-kuma3さん、
おかげさまで、P 空 /P による、スペースの空きの理解が進みました。
こういうことだったのですね。
http://tsurumaki-office.com/2014/10/08/p_tagu_kara/

line height、margin bottom云々については、
まだ、知識が不足しております。これから、勉強してみまーす。

2014/10/08 11:56:24

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません