このページはホームページ本体レイアウトの胆ともいえる大事なところで、表示領域の内部について見ています。
表示領域とは、例えばbodyならbodyの幅と高さで表されるところの内側、containerならcontainerの幅と高さの内側です。
pink地はcontainer領域
黒枠はbody(ホームページ本体)、ピンク地はcontainerと思ってください。
この領域には、width、heightで表されるコンテンツ部、その周りの余白、余白を囲む枠線そして、枠線の外に存在するmarginが入ります。
表示領域の概念
では、図示してみましょう。
pink地はcontainerの表示領域です
margin(枠線と表示領域の間隔)
border(余白外回りの枠線)
padding(コンテンツ部外回りの余白)
width,height(コンテンツ部)
ピンク色部をbodyの中央に配置したcontainerだとします。
marginという間隔を空けてborderという枠線があります。
その内側にpaddingという余白を空けてwidth、heightで定めたコンテンツ部がある、という図式です。
width、heightで決めた寸法のコンテンツを書き、その周りに余白を付けて枠線で囲む。
枠線で囲まれた部分と領域の間にmarginという間隔がある。
この概念を念頭に置いて
これらを順に見ていきましょう。