HTML/CSSの位置やサイズについての疑問や試したこと

/**********************************************************************************************/
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Gimp%a4%ce%bb%c8%a4%a4%ca%fd
https://oldcygwin.web.fc2.com/
header.page-header.wrapperの高さ(81.2)がどこから来てるのか分からない。

試しにChatGPTに聞いてみた。
https://baskmedia.jp/chatgpt/#index_id8
https://chat.openai.com/auth/login

これはflexboxを使っています。81.2はimg(52.5)とmarin(14)を足した数値よりも大きいですがなぜですか？
81.2は、img要素の高さ52.5pxと上下のマージン14pxの合計よりも大きい理由は、おそらく以下の2つの要因によるものだと考えられます。
1.Flexコンテナの高さを考慮しているため
81.2は.header .page-header .wrapperが配置されているFlexコンテナの高さを表しています。Flexコンテナには、img要素以外にも、ヘッダー内の他の要素も含まれるため、それらの要素の高さも考慮している可能性があります。
2.視覚的なバランスを取るため
デザイン的な観点から、img要素の高さやマージンの合計よりも大きな値を設定することで、ヘッダー要素全体のバランスを取ろうとしている可能性があります。また、デザイン上の理由で、マージンの合計値を14pxとしているが、これが十分でないため、高さに補正を加えたという可能性もあります。

したがって、81.2pxという高さは、img要素の高さやマージンに加え、Flexコンテナの高さやデザイン上の要因も考慮して設定されている可能性があるため、厳密に52.5pxと14pxを足した値に一致する必要はありません。
(何とも言えんなあ、ホントか?)

https://oldcygwin.web.fc2.com/ で <nav>も81.2となっていますが、margin(24)とline-height(34)を足してもたりません。なぜ81.2なのですか？
<nav>要素の高さが81.2になる理由は、<nav>要素自体の高さに加えて、その内部にある要素（主にリスト要素）のマージンやパディングなどが影響しているためです。<nav>要素の高さを81.2に設定している理由は、このウェブサイトのデザイナーが意図した高さであると思われます。
具体的には、<nav>要素の高さは52.5pxの画像の高さに加えて、14pxの上下マージン、そして8.7pxの余白を加えた高さになっています。また、このウェブサイトでは、リスト要素に対してpaddingやmarginを設定しているため、これらの値も<nav>要素の高さに影響を与えている可能性があります。
なお、<nav>要素の高さを厳密に81.2にするためには、line-heightやbox-sizingなどの要素も考慮する必要があるかもしれません。ただし、このウェブサイトのコードを確認しただけでは、これらの要素がどのように設定されているかはわかりません。

https://oldcygwin.web.fc2.com/ にて、8.7pxの余白はflexboxと関係がありますか？
<nav>要素に対して設定されている余白の8.7pxは、Flexboxに直接的に関係はありません。Flexboxは、要素の配置方法や順序を指定するためのレイアウト方法であり、余白の設定には直接関与しません。
しかし、Flexboxを使ったレイアウトでは、Flexコンテナに対して余白やパディングを設定することが一般的です。これは、Flexコンテナに対して要素の配置を調整するために必要な場合があるためです。具体的には、Flexboxで要素を中央揃えにする場合には、コンテナに上下方向の余白を設定することが一般的です。
したがって、<nav>要素に対して設定されている8.7pxの余白は、Flexboxとは直接的な関係はありませんが、Flexboxで要素を配置する際に余白を調整することがあることから、ある種の関連性があると言えます。

https://oldcygwin.web.fc2.com/ にて、8.7pxの余白は https://unpkg.com/ress/dist/ress.min.css と関係がありますか？
8.7pxの余白は、リセットCSSである「ress.css」の影響を受けている可能性があります。しかし、具体的な要因については判断できません。
「ress.css」は、HTML要素のスタイルをリセットして、ブラウザ間の差異を最小限に抑えることを目的としています。このリセットには、マージンやパディングなどのデフォルトの値も含まれています。
したがって、<nav>要素に設定されている8.7pxの余白が、「ress.css」によるデフォルト値の影響を受けている可能性はあるものの、詳細な原因についてはCSSファイルの全体像や、その他のスタイルルールなどを考慮する必要があります。

https://oldcygwin.web.fc2.com/ にて、8.7pxの余白は https://fonts.googleapis.com/css?family=Philosopher と関係がありますか？
8.7pxの余白は、Google Fontsで使用されている「Philosopher」フォントとは直接的な関係はありません。Google Fontsは、Webフォントを簡単に利用できるようにするためのサービスであり、Webフォントの読み込みや適用に関するスタイルルールを提供していますが、マージンやパディングの設定には影響を与えません。
ただし、Google Fontsで提供されるフォントを利用する場合、フォントの読み込みや適用に関するスタイルルールを適切に設定することが重要です。例えば、フォントの読み込みに時間がかかる場合には、表示が崩れることがあるため、適切なフォールバックフォントやフォントスタックを設定する必要があります。このような場合には、マージンやパディングの設定も適切に調整する必要がありますが、それはGoogle Fonts自体には直接関係がありません。

https://oldcygwin.web.fc2.com/ にて、<nav>の8.7pxの余白は <div class=”home-content wrapper”> と関係がありますか？
<nav>要素の8.7pxの余白は、直接的に<div class=”home-content wrapper”>とは関係がありません。<nav>要素のスタイルルールには、余白の設定が含まれておらず、<div class=”home-content wrapper”>要素に対する影響も受けていません。
ただし、<nav>要素は<header>要素の中にあるため、<header>要素のスタイルルールや、<header>要素とその親要素や兄弟要素などの間の余白やパディングの設定が、<nav>要素に影響を与える可能性があります。そのため、<nav>要素の余白について調べる場合には、<header>要素やそれらの親要素や兄弟要素などのスタイルルールも調べる必要があります。

リセットCSSを外しても余白はなくならない。(他の数値も何ヶ所か変わったが詳しくは見てない)
CSS フレックスコンテナ 縦のサイズ、でググった：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
で、marginをfirst-childに入れても下に余白は発生しない。
justify-content: space-between; を外しても81.2は変わらない。
<H1>と<nav>の中心は一致していないため、その分ズレるのは分かるが余白の方が大きい気がする。というか
リンクの例ではどちらか一方には余白が無いのが正しいハズ。homeページと全く同じではないが。
line-height: 1.7; を外すと 81.2->73.5 になる。が余白は無くなってない。
<H1>だけだと0だが、flexを付けると68(=navの34+34)になり、<img>を付けると81.2になる。
<img>から margin-top: 14px; を外すと68(=navの34+34)になる。
<nav>とmargin-topを外してflexと<img>だけにすると67.2(>52.5)になり余白ができる。

結論：flex+<img>やると下に余白ができる。flex+<img>+margin-topやると余白が広がる。
(ChatGPTが最初に言った通りと思うが、自分で試さないと納得いかないし覚えない)

/**********************************************************************************************/
細々とした雑多なメモ
簡単なスライダーで画像ファイルをロードした時、200x200pxのjpgファイルをcssで180x180pxに指定した
らカットされるのではなく縮められた。(2023.09)
\
ユーザーエージェント スタイルシート (FirefoxではブラウザCSS) (2023.09)
https://kojika17.com/2023/02/inital-value-and-UA-of-style-sheet.html
https://skillhub.jp/courses/248/lessons/1896

/**********************************************************************************************/

 
参考情報：
html css タグ間の 不明な距離、でググった：
[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ
https://coliss.com/articles/build-websites/operati…
(“Cygwinの適当レシピ、案外長寿だった件。一旦まとめ、SlackwareでWeb系の副業したい。”と”メモを見る”
\の間にも隙間があり、marginとmarginの相殺、marginとpaddingの相殺?が考えられる)
【html/CSS】間隔,隙間,余白,空白をあける方法
https://csshtml.work/spacing/#i-3
table要素でcellspacingを指定しない場合は、一般的なブラウザでは 2ピクセルの間隔が空く
https://www.tagindex.com/html_tag/table/table_cellspacing.html