のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その23:ボックスモデルについて

23日目です。いよいよ残すところあと2回ですよ!

よく続けてきた!自分偉い!ひゃっふー!

てな訳で、本日のお題は【ボックスモデル】についてです。

 

ボックスモデル:ブロック要素1つ1つを箱とするイメージ。

<h><p><ul><table>などなど。

この、ボックスの構成要素は、

内容(コンテンツ)

余白(padding)

他のボックスとの間隔(margin)

線の太さ(border)

の4つで作られます。

また、4つそれぞれに

  • top
  • bottom
  • left
  • right

という四辺がありますので、それぞれを指定していく事ができます。

img1

例えば、全体の幅(width)を800pxにした場合、幅400pxのボックスを2つ並べてしまうと、

margin:5px;

padding:3px;

border:1px;としたら、

margin:5px+border:1px+padding:3px+width:400px+padding:3px+border:1px+margin:5px=418px

となってしまう為、あれ?18pxオーバーしてるぞ?入らないぞ?という事になってしまいます。

計算、大事ですねぇ。

 

そして、borderプロパティですが、それぞれの辺にそれぞれのstyleはwidht、colorを指定してあげる事が出来ますので、

感の良い方はわかりますね?

そうなんです。色々遊べるんです。

四方の指定の仕方ですが、

例えばpaddingプロパティを例にしてみると、

padding:数値px→四辺すべて同じ数値を指定

padding:上px 右px 下px 左px;→四辺それぞれ指定

padding:上px 左右px 下px;→三辺指定

padding:上下px 左右px;→二辺指定

てな感じで指定できます。marginなんかもこの法則ですので覚えましょう。