ボックス使用時の無駄な空白を消したい

[岩田]

ボックスを適用した際に、文末と枠の間が無駄に開いてしまいます。

要素の検証でテキストへのパディング等触ってみたのですが、
変化がなかったので、どうしたものかと・・・

画像の部分を変更したいです。

ちなみにこれはCOLORSですが、MAGJAMでも同じでした。

[岩田]

ボックスを適用した際に、文末と枠の間が無駄に開いてしまいます。
要素の検証でテキストへのパディング等触ってみたのですが、
変化がなかったので、どうしたものかと・・・
画像の部分を変更したいです。
ちなみにこれはCOLORSですが、MAGJAMでも同じでした。

添付ファイル:

添付ファイルを開くにはログインしてください。

[DigiPress サポート]

ボックス固有の現象ではなく、記事内におけるpタグの段落のための下部マージン(40px)です。

段落(p)を使用したくない場合は、最後の1文をdivタグなどで括ってください。

[岩田]

ありがとうございます。
試してみたのですが、改善されません。

その1：
<div class=”box box-red”>

1. レイアウト
2. 配色
3. フォント

<div>

</div></div>

その2：
<div class=”box box-red”>

1. レイアウト
2. 配色

<div>

3. フォント

</div>

</div>

その3：
<div class=”box box-red”><div>

1. レイアウト
2. 配色
3. フォント

</div></div>

その4：
<div class=”box box-red”><span>

1. レイアウト
2. 配色
3. フォント

</span></div>

その5：
<div class=”box box-red”>

1. レイアウト
2. 配色

<span>

3. フォント

</span>

</div>

その6：
<div class=”box box-red”>

1. レイアウト
2. 配色
3. フォント

<span>

</span></div>

このような感じでやってみたのですが、
改善されず、どうしたらよいのか・・・

お忙しいかとは思いますが、よろしくお願いします。

[DigiPress サポート]

段落(p)の下部マージンではなく、リスト(ul)の下部マージンをなくす、ということでしょうか。

[岩田]

はい、リストをボックスで囲うと、画像のように
下に余計な空間ができてしまうので、それを整えたいのです。

テキストの下にすぐ枠がくる感じです。

枠の上がテキストに近いのに対し、
枠下はテキストから離れていて、不自然なので、
どこを修正すればよいのでしょうか？

[DigiPress サポート]

下部のマージンがあるのは、リストの直下に続いてテキスト、画像などのコンテンツが来る場合は、逆にマージンがないと下部のコンテンツと隣接してしまい、区別がつきにくく見辛くなるためです。
これは段落(p)タグでも同様です。

これをご理解頂いた上でリストの下部マージンをなくすには、以下をオリジナルスタイルシート設定に追記してください。

.box ul{
    margin-bottom:0!important;
    padding-bottom:0!important;
}

[投稿者]

投稿