CSSわからん 2022/04/04
具体的に言うとScrapboxのインデント部分のchar-indexがなぜ文字と同じ高さに並ぶのかが知りたいんですよねkuuote.icon
というよりそれらしき要素が無いのになぜ中央に寄るのか
自分でコピーしたら何をどうやっても上に貼り付く
https://gyazo.com/fcc8c06ce003a095f28afa284d8369e0
行を追うごとにずれているのかと思ったけどただの目の錯覚だったMijikko.icon
思い当たりそうなのを片っ端からメモしてみるMijikko.icon
高さ(heightやline-height)が統一されていない
多分これやろなぁ、どう適用されるのか理解していないkuuote.icon
何かしらの問題でずれが生じている
merginやpaddingの値
このへんはないはずkuuote.icon
その他の要素の異常
けれど.lineをそのままコピーしたとしたらこれも無い？
positionの値をミスっている
コピーしたのならこれはないか
目コピーだからなぁ…実際ミスってた(これとは関係なかった)kuuote.icon
.lineのCSSが正しくない
そもそも行の中の要素は.lineからの相対位置で決まる（多分）ので、.lineの中の要素が原因とは考えにくい気がしたMijikko.icon
自分で調べる方法も後で書きたいなMijikko.icon
数時間潰したけどScrapboxのCSSをこちらの状態に寄せることすらできなかったkuuote.icon
多分できたMijikko.icon
https://gyazo.com/f872e15f453faa3b5e324bc588ca4795
.line .indent-mark .padのheightを1emから1.2emに上げた
overflowやtext-overflowの値を消してみる必要もある…？
多分必要ない
色は
code:css
.line .indent-mark .pad { background-color: tomato; }
span.indent .char-index, .text>span>.char-index { background-color: aqua; }
一切分からないので投げた、完全にお手上げ
https://gyazo.com/3268dc945cb9a64e4f6825c51801af2c
見た目そこまでおかしくないような…？Mijikko.icon
後でもうちょっと調べてみよ
すみませんありがとうございますkuuote.icon
ただ微調整でなんとかする方向ではなく根本からどうにかしたい気持ちです、後からCSS調べよう
👍Mijikko.icon
これ改めて見ているけど原因は該当部分の構造でもCSSの当て方の問題でもない
CSSと該当部分の構造を丸ごとScrapboxの物に差し替えても発生する
つまりkuuote.iconは的外れなことに数時間費やした挙句に人の時間まで奪ったというのか
つらい
かなしいな🥺Mijikko.icon
なんかすみませんでしたkuuote.icon
検証ありがとうございました
原因が判明したkuuote.icon
<!DOCTYPE html>ってなんとなくで入れていたけれど結構重要なんだ…Mijikko.icon
勝利
https://gyazo.com/af60cae8dc46f90b80d9ac8a735b2aae
ヤッタネ！dnin.iconMijikko.icontakker.icon
というかそれが完成形だったのかMijikko.icon
よく理解できていなかった…
想定している正しい状態を加工して作っておけばよかったかなkuuote.icon