あとは、余白についても知っておかねばならない気がするので、調べる。
余白の各呼び方はこんな感じ。
真ん中の青い四角の中がコンテンツ、コンテンツの枠がborder、枠とコンテンツの隙間がpadding、枠と枠の間がmarginになる。
背景色や背景画像などを設定した場合は、枠の内側に適用される。(marginは透過)
余白には、上下左右の4か所に、それぞれ値を設定できるが、指定方法は「上・右・下・左」の上から時計回りに設定する。
use agent stylesheetとは？
課題のToDo Listを作っていて、「？？」と思ったことがあったので覚書き。
左側のpadding部分(緑色のところ)なのだが、CSSで設定していないにも関わらず、余白ができている。
Google Chromeの検証ツール(F12)で見てみると、user agent stylesheetとして、padding-inline-start: 40; が適用されているようだ。
なにやらブラウザには、ブラウザ毎に定義されているデフォルトのCSSがあるらしい。
まあ、ブラウザ側としては、良かれと思ってやっているのかもしれないが、こちらとしては意図せぬ表示になるので、ちょっと困る。
今回は、左側のパディングをもう少し狭くしたいので、このデフォルトのCSSを打ち消す感じで、ulのCSSにpadding-inline-start: 20px; を適用させる。
これでさっきよりちょっと狭くなった。
