スタイルシートのMargin、Border、Paddingの関係

シェアする

  • このエントリーをはてなブックマークに追加

スタイルシート style.cssを編集していて今一つよくわからなかったMargin、Border、Padding の関係を整理してみました。

stylesheet

外側から、Margin、Border、Padding です。

 

もう1つわかりにくのが、サイズの指定方法です。

  • padding: 1px;                    「上下左右」をまとめて指定
  • padding: 1px 2px;              「上下」と「左右」を指定
  • padding: 1px 2px 3px;        「上」、「左右」、「下」を指定
  • padding: 1px 2px 3px 4px;  「上」、「右」、「下」、「左」を指定(時計回り)

わかりにくいし、間違えやすいので「上下左右」をまとめて設定か、または「上」、「右」、「下」、「左」のすべてを指定でいくことにします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です