雑記：Obsidianの編集ビューではmarginではなくpaddingを使うべきという話

.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
}

padding + border + margin

ちょっと調べてみたところ、どうやらmarginというのはborderの内側に入るらしく、borderの外側の空間はmarginというもので指定するらしいです（CSSがすこしでもわかる人からしたら「何いってんだ今更」という感じだとは思いますが……）

参考：ボックスのボーダー・パディング・マージン — HTML & CSS入門 (nrym.org)

というわけで、試しに大きなmargin-bottomを指定してみました。深く考えず、とりあえずpaddingに合わせて!importantも指定しています。

.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
  margin-bottom: 100px !important;
}

僕の予想ではこれで行けるはずだったのですが、やってみるとなぜか編集ビューでだけ反映されませんでした。閲覧ビューでは予想通りに機能しています。

編集ビュー

閲覧ビュー

難しすぎて頭爆発しそうになりました。

調べたところ

ちょっと調べたらニアピンの会話がObsidianのフォーラムにありました。

参考：Heading (top&bottom) spacing through CSS – Help – Obsidian Forum

フォーラムのコメントによると、こんな感じでcm-s-obsidianの指定を追加すれば編集ビューでもmarginが反映されるとのこと。一行目、cssを当てる対象の部分がちょっと変わっています。

.cm-s-obsidian .HyperMD-header.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
  margin-bottom: 100px !important;
}

実際、これだとうまく機能します。

これでめでたしめでたし！　と一瞬思ったのですが、よく見てください。

よく見ると、行数の表示がずれています。paddingのときは追従してくれたのに、marginだとバグるのです。表示がずれているだけで編集には大きな問題はないのだけど、これはとても気持ちが悪い。

ムムムと思ってフォーラムをもう一回見直して見ると、最後に「編集ビューではmarginではなくpaddingの利用が推奨される」的なコメントが書かれていました。

どうやら編集ビューでmarginを扱うとエディタの最適化がうまく機能しなくなるらしく、そこから察するに、編集ビューでmarginを使うことは（無理やりやればもちろんできるものの）想定されていないということなのかなと思います。

というわけで

長々と書きましたが、見出しに下線を引くのは諦めました。