Skip to content
This repository has been archived by the owner on Mar 12, 2023. It is now read-only.

不具合:本文連続改行の反映 #32

Closed
herohoro opened this issue Feb 10, 2022 · 2 comments
Closed

不具合:本文連続改行の反映 #32

herohoro opened this issue Feb 10, 2022 · 2 comments

Comments

@herohoro
Copy link
Contributor

herohoro commented Feb 10, 2022

改行をして次までの行間を調整しようとすると反映されず、
空ブロックを埋め込むことができません。。。

▼Notion上で3行連続改行
スクリーンショット 2022-02-10 14 03 25

▼ブログ上では反映されず
スクリーンショット 2022-02-10 13 59 17
該当箇所を見出し変更したのでこのリンクで飛べます

@herohoro herohoro changed the title 不具合:本文改行の反映 不具合:本文連続改行の反映 Feb 10, 2022
@otoyo
Copy link
Owner

otoyo commented Feb 10, 2022

スクリーンショット 2022-02-10 18 22 06
HTMLでは空の <p> タグは出力されているのでCSSの問題ですね。
該当の p 要素に min-height がないのが原因です。

easy-notion-blog では下記のように min-height を設定しています。

.post :global(p) {
margin: 0.3rem 0;
color: var(--fg);
font-size: 1rem;
min-height: 1.8rem;
}

ちなみにこの現象はマージンの相殺と呼ばれます。今回は下記リンクの「空ブロック」に該当します。
ぜひ参照してみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

@herohoro
Copy link
Contributor Author

herohoro commented Feb 10, 2022

ドキュメントリンクまでありがとうございます!まさにその「空ブロック」に

あるブロックの margin-topmargin-bottom と隔てる境界、パディング、インラインコンテンツ、 height, min-height のいずれもがない場合、上端と下端のマージンは相殺されます。

と記載があり、min-heightでマージン相殺を防いでおられたということだったんですね。
行の高さの設定かなにかかと思いcherry-pickの際不採用しておりました。。。。。

早速コードを追加したところ無事に連続空行を反映させることができましたm(_ _)m

@otoyo otoyo closed this as completed Feb 11, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants