第５章(p102-p109) CSSの基礎(ボックスモデル)

htmlとcssの基本を学びます。
[すべての要素がボックスからできている]

ボックスモデル画像

インライン要素とブロック要素(p48-p49参照)
・インライン要素…文章の一部として扱う要素。要素の前後で改行されない。[ a,span,img]
・ブロック要素…行全体をまとまりとして扱う要素。要素の前後に改行される。[ div,p,h ]

displayプロパティ(p114-p115参照)

まとめ

改行 width height margin padding
inline なし × × △（水平方向のみ） 〇 ※他の要素と重なる
block あり 〇 〇 〇 〇
inline-brock なし 〇 〇 〇

〇

 


                ※推奨:CSSの先頭に記述してスタイルをリセットする記述例

                @charset "UTF-8";
                *,
                ::before, ::after {
                    margin: 0;
                    box-sizing: border-box;
                }
                body{
                    font-family: "Meiryo, Osaka", "sans-serif";
                }
                html, body {
                    height: 100%;
                }