- ベストアンサー
ｐタグによる段落間のアキ調整について
こんにちは。 HTMLのｐタグでくくった段落が連続すると、 多くのブラウザでは段落間に１行程度のアキが生じると思います。 このアキをCSSによってなくしたいのですが どう指定すればいいのでしょうか？ たとえば段落の「margin-bottom」に０ではなく マイナス値を入れればなくせるようですが、 「ｐによる１行アキ」というのがすべてのブラウザでの 共通仕様なのか分からず、マイナス値使用に怖さを覚えます。 どういうやり方がすべてのブラウザに通用する 正しいやり方なのでしょうか？
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> > まあ、0などにすれば空きは見えなくはなりますが… > え？ できますか？ できますよ。 ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、 下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。 margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。 このようにして略記した場合は、四辺を一度に指定することが出来、 しらべてみたところ、Operaでは margin:0; ← 上下左右0に指定 margin:0 1px; ← 上下0, 左右1pxに指定 margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定 margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定 という風になっているようです。 まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;
その他の回答 (3)
ちなみに、下記ページでは、上下のマージンを1exに指定しています(margin: 1ex 0; 書き忘れていましたが、0だけは、何も指定しないと言うことなので、単位を省略できます)。 なお負の値ですが、先に紹介したリファレンスによると、一応不正なものではないとのことです。ただし、ブラウザによって実装が異なります。
お礼
たびたびありがとうございます。 ああ、ご紹介いただいたページの段落間のアキでも十分なんです。 ただ、私は「行」間を少し空ける指定もしているものですから それに引きずられてか、段落間もけっこう空いてしまうんです。 あ"、行間指定との組み合わせで何とかなったり…。 ちょっと試行錯誤はしてみます。
すべてのブラウザによって微妙に違うのは仕様です。ある程度はあきらめましょう。 …と言っても、ある程度の調整は出来ます。 marginプロパティに指定する数値には、px, ex, emなど、様々な単位があるので、それを活用しましょう。それで不自然のない区切りが出来ると思います。 まあ、0などにすれば空きは見えなくはなりますが…、わたしの感覚では少々不自然に感じました(段落が適切に区切られている場合ならなおのこと)。適切な単位で適切な量の空間を空けるようにした方がよいでしょう。 なお、margin:1; などとやって1pxと解釈されるというのはIEのみの仕様です。単位は省略してはいけません。 なお、これからは私見ですが、わたしは段落マージンにはpxを使わず、exなどの単位を使うようにしてます。これらは小数点指定が出来るし、ブラウザを使う側の都合によって適切な量の幅がとられるからです。
お礼
ご回答ありがとうございました。 > まあ、0などにすれば空きは見えなくはなりますが… え？ できますか？ 以下のような指定をしたのですが、 例えばIE6.0では完全に１行あきます。 詰めるにはマイナス値が必要のようですが 指定が間違っていますでしょうか？ ---------------------------------------------- ●HTML ---------------------------------------------- <p>段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落</p> ---------------------------------------------- ●CSS ---------------------------------------------- p { margin-bottom: 0px;} ---------------------------------------------- なお、ご紹介のページは知りませんでした。 読ませていただきます。ありがとう。
- moon_night
- ベストアンサー率32% (598/1831)
ブラウザによって<p>の挙動は違うような気がします。（未確認） <br>を使いましょう。
お礼
ご回答ありがとうございました。 やっぱり挙動が違うと考えるべきですよね。 困ったなぁ。 > <br>を使いましょう。 ごめんなさい。あくまで段落の連続であり 意味的に改行じゃないんです。 それに段落間を0.5行にしたいところも ありまして…。 できないって考えるべきなのでしょうか？
お礼
なるほど。 「margin-bottom: 0px」のほかに 「margin-top: 0px」も指定したら完全に詰まりました。 「margin: 0px」で全解除してbottomだけ追加指定してもよさそうですね。 まだ、ここらへんの仕組みが完全には理解できていなかったようです。 もう一度じっくり資料を読み返してみたいと思います。 とても助かりました。解決しました。 ＊「すぐに締め切るな」といった意見をよく目にしますので 半日ぐらいは開けておきます。ご容赦ください。
補足
補足欄にてごめんなさい。締め切らせていただきます。 おふたかたともどうもありがとうございました。 特にTakamiChieさんは何度もご回答いただいたこと、 いろいろと検証までしてくださったこと、 そのご親切に感謝申し上げます。 また機会がありましたら、どうぞよろしくお願いいたします。 ありがとうございました。