余白と単位 margin/padding/border

JavaScript/HTML/CSS CSS

外側の余白と内側の余白

  • margin ... 外側の余白
  • padding ... 内側の余白
  • border ... 2つの境界線

margin,padding,border共通 ...スペースで区切る

指定する値の数 指定した値が適用される場所
１つ [上下左右]
２つ [上下]　[左右]
３つ [上] [左右] [下]
４つ [上] [右] [下] [左]
  • margin-top,padding-top,border-top ... 上マージン、パディング、ボーダーを指定
  • margin-bottom,padding-bottom,border-bottom ... 下マージン、パディング、ボーダーを指定
  • margin-left,padding-left,border-left ... 左マージン、パディング、ボーダーを指定
  • margin-right,padding-right,border-right ... 右マージン、パディング、ボーダーを指定

border

  • border-style,border-top(bottom,left,right)-style ... ボーダーのスタイルを指定
  • border-width,border-top(bottom,left,right)-width ... ボーダーの太さを指定
  • border-color,border-top(bottom,left,right)-color ... ボーダーの色を指定

スタイルの種類

値 表示される線
none 太さが0になりボーダーは表示されない　もっとも優先度が低い　初期値
hidden 太さが0になりボーダーは表示されない　もっとも優先度が高い
dotted 点線
dashed 破線
solid 1本線
double 2本線
groove 凹んだように見える線
ridge 凸出したように見える線
inset 上と左が暗く、下と右が明るい　要素が埋め込まれて見える線
outset 上と左が明るく、下と右が暗い　要素が出張って見える線

ボーダーの太さ

  • 数値で指定 ... 数値にpxなど単位をつけて指定
  • キーワードで指定 ... 実際に表示される太さはブラウザによって異なる
値 太さ
thin 細い
medium 普通
thick 太い

単位

px単位

  • デバイスの1ドットを表す値

  • borderなど一部のプロパティでは小数点pxを許容しない仕様もある

    em単位

  • 要素のフォントサイズ値を基準とした値

  • 親要素(基本HTML)まで遡ってフォントサイズ値を継承
  • HTML要素のフォントサイズはデフォルトの場合16px

例）2em = 16 × 2 = 32px

rem単位

  • ルート要素(基本HTML要素)のフォントサイズ値を基準とした値
  • 要素にフォントサイズが入っていても影響を受けない
body {
 font-size: 1.2em; 
}
.example {
  margin: 2em;
  padding: 2rem;
  font-size: 1.5em;
}
.practice {
  padding: 1.5em;
}

上記の場合

.exampleのmargin → フォントサイズを追っていくと 16 × 1.2 × 1.5 × 2 = 57.6px

.exampleのpadding → 16 × 2 = 32px

.practiceのpadding → 要素にフォントサイズがないため親要素の.exampleのフォントサイズが基準値となり43.2pxとなる

%単位

  • プロパティによって何が基準になるかが変わる
  • widthやmarginプロパティなら親要素の横幅に対する、heightプロパティは親要素の高さに対する割合など

vw単位

  • ブラウザの横幅に対する値
  • 1vw = ブラウザの横幅の1%
  • スクロールバーの幅などを含む仕様