WordPressのブログを使用しています。テキストエリア内の文章に対する色々な指定（margin-bottomなど）をＣＳＳで行っているのですが、テキストエリア内文章の、div要素で囲んだ部分に対しては、margin-bottomが無効化され、行ピッチが詰まった状態になってしまいます。
これはＣＳＳでの指定の仕方がおかしいのでしょうか？
それともWordPressの仕様なのでしょうか（ちなみにテ－マは「Coraline」というものを使っています）
いずれにしろ対策を講じたく、対処法を教えていただけませんでしょうか。
また別問題として、自動改行されたところも行ピッチが詰まってしまいます（div要素で囲んでいなくても）。
こちらの対策も教えていただければありがたいです。
ズバリな回答をいただいた方には高ポイントを差し上げます。
なにとぞよろしくお願いいたします。
No.4
814
232
200pt
ご提示いただきましたCSSを、
http://coralinedemo.wordpress.com/
のページに適用してテストしてみましたが、改行は一致しました。
また、coralineのデフォルトCSSでも、p{margin:0 auto}とすることによって望む効果を確認しております。
これは、私の推測が間違っていて、HTMLの方にも原因があるのかもしれません。そうであれば、CSSだけではいかんともし難いのかもしれません。
あと、一応念のための質問ですのでお気をを悪くなされないで頂きたいのですが、アップしていただいたCSSファイルはこれそのものではないですよね？ HTMLファイルになっているのは私が見やすいように変換していただいたと理解していますが、よろしいですか？
No.1
42949
50pt
何か誤解があると思います
行ピッチを指定するのはmargin-bottomではなくline-heightです
http://www.htmq.com/style/line-height.shtml
その観点でCSSを見直してみてください
追記
km1981さんとLhankor_Mhyさんのおかげさまで、行ピッチがゼロという現象は解決できました。ありがとうございます。
あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ－トの指定などで改善できないものでしょうか？
自動改行でできた行ピッチを通常改行でできた行ピッチに合わせるか、逆に通常改行でできた行ピッチを自動改行の行ピッチに合わせるか、どちらかにできれば嬉しいです。
例えば現在、記入しているこのフォ－ムでも自動改行と通常改行で行ピッチは同じですよね。
こういう風にしたいのです。
お知恵を拝借したく、引き続き質問させていただきます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
あっごめんなさい、そうですね。
ただ、文章作成時に普通に書く分には指定した通りの気に入ったスタイルなのですが、質問にあるとおり、その文章をdivで囲むと行ピッチがなくなるのです。
質問はこのまま続行します。ご指摘の段、ありがとうございました。
追記：使用ブラウザは、Chrome（最新バ－ジョン）です。
No.2
814232
サンプルを書きました。
↓こういうことでしょうか？
このような現象が起きてしまっているのであれば、id:km1981のご指摘の通りです。
おそらく、p要素に対してmargin-bottomを設定しているのだと思いますが、これは本来「段落の下マージン」を設定するものですから、以下のような状況では思い通りの改行になりません。
・段落内にボックスが存在する。
・段落内に改行が存在する。
・段落内に折り返しが存在する。
ですので、いちばんよい解決法はline-heightで書き直すことです。
以下にとりあえずの解決法を示します。
・「divで囲んだ部分」の解決方法
divで囲む時は以下のように書いて下さい。
<div style="margin-bottom:xxx"></div>
xxxの部分は、ご自分の設定と合わせて下さい。
またはクラスを設定して書いてもかまいません。
・「自動改行されたところ」の解決方法
折り返しされない長さで書いて下さい。
あるいは、pre要素で書くか、CSSでwhite-spaceをnowrapにしておくと折り返しがされなくなります。はみでますけど。
Lhankor_Mhyさんとkm1981さんのおかげさまで、行ピッチがゼロという現象は解決できました。
ありがとうございます。
あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ－トの指定などで改善できないものでしょうか？
自動改行でできた行ピッチを通常改行でできた行ピッチに合わせるか、逆に通常改行でできた行ピッチを自動改行の行ピッチに合わせるか、どちらかにできれば嬉しいです。
例えば現在、記入しているこのフォ－ムでも自動改行と通常改行で行ピッチは同じですよね。
こういう風にしたいのです。
お知恵を拝借したく、引き続き質問させていただきます。
No.3
814232
>あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ－トの指定などで改善できないものでしょうか？
できれば現物を見せていただきたいのですが、難しいのですよね？
推測ですが原因は、
・line-height設定で行の高さを調整したが、p要素に対するマージンがあるので、段落間に隙間ができている
だと思います。
対処としては、
p{margin:0 auto}
をCSSに加えることでしょうか。
返信いただきありがとうございます。
先ほども、今回もご親切にご指摘いただいておりますこと感謝しております。
さっそく
p{margin:0 auto;}
をスタイルシ－トに加えたのですが、変わりなしです。
現物のスタイルシ－トを無料ＨＰスペ－スにあげてみました。
（WordPressのスタイルシ－トは長いので恐縮なのですが）下記ＵＲＬから見ていただけるようにいたしました。
http://kawaii4japan.web.fc2.com/
4分の1ほど下がったところにある、
/* =Typography---------------- */から下が問題かなと思っております。
もしこのスタイルシ－トからなにかおわかりでしたら教えていただけると嬉しいです。
親切なご返信、誠にありがとうございました。
No.4
814232
ここでベストアンサー
200pt
ご提示いただきましたCSSを、
http://coralinedemo.wordpress.com/
のページに適用してテストしてみましたが、改行は一致しました。
また、coralineのデフォルトCSSでも、p{margin:0 auto}とすることによって望む効果を確認しております。
これは、私の推測が間違っていて、HTMLの方にも原因があるのかもしれません。そうであれば、CSSだけではいかんともし難いのかもしれません。
あと、一応念のための質問ですのでお気をを悪くなされないで頂きたいのですが、アップしていただいたCSSファイルはこれそのものではないですよね？ HTMLファイルになっているのは私が見やすいように変換していただいたと理解していますが、よろしいですか？
追記
デフォルト状態で同様の事をやってみました。しかしうまくいかず・・。
自動改行と、「シフトキ－を押しながらの改行」は、同じ行ピッチなのですが、普通にエンタ－を押しただけの改行だったらやはり大きく行ピッチが空いてしまうのです。
この単純な、「エンタ－のみを押すだけの改行」も自動改行と同じ行ピッチにしたいのですが。。
Lhankor_Mhyさんのやり方と何が違うのか考え込んでおります。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
え！？わざわざ検証していただいたのですか！！
それはなんとも恐れ入ります！
私の方でも一度、デフォルト状態で同様の事をしてみます。
Lhankor_Mhyさんのおっしゃるとおり、htmlの方に問題があるのかもしれません。
なにはともあれ、申し訳ないやら恐れ入るやらです。必ずご報告させていただきますので少々お待ちください。本当にお世話さまでした。
確認していただきやすいかと思い、ＨＴＭＬ形式でＣＳＳファイルの中身をアップさせていただきました。細心の注意を払っていただきありがとうございます。
【上に追記しました】
km1981
2011/07/29 08:47:09
24
24
Lhankor_Mhy
anglgm
1
2
追記
デフォルト状態で同様の事をやってみました。しかしうまくいかず・・。
自動改行と、「シフトキ－を押しながらの改行」は、同じ行ピッチなのですが、普通にエンタ－を押しただけの改行だったらやはり大きく行ピッチが空いてしまうのです。
この単純な、「エンタ－のみを押すだけの改行」も自動改行と同じ行ピッチにしたいのですが。。
Lhankor_Mhyさんのやり方と何が違うのか考え込んでおります。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
え！？わざわざ検証していただいたのですか！！
それはなんとも恐れ入ります！
私の方でも一度、デフォルト状態で同様の事をしてみます。
Lhankor_Mhyさんのおっしゃるとおり、htmlの方に問題があるのかもしれません。
なにはともあれ、申し訳ないやら恐れ入るやらです。必ずご報告させていただきますので少々お待ちください。本当にお世話さまでした。
確認していただきやすいかと思い、ＨＴＭＬ形式でＣＳＳファイルの中身をアップさせていただきました。細心の注意を払っていただきありがとうございます。
【上に追記しました】