ボックス

CSS

ボックスには余白、枠線、間隔という領域がある

  1. 余白(マージン)
    • 枠線周りの余白
  2. 枠線(ボーダー)
    • 文字列やイメージなどの内容を囲む枠線
  3. 間隔(パディング)
    • 文字列やイメージなどの内容と枠線との間隔
h6{
        /*border-style 枠線のスタイルを指定する*/
        /*値にはnone,solid,double,dashed,dotted,groove,ridge,inset,outsetを指定*/
        border-style:ridge;

        /*border-top-style 枠線(上)のスタイルを指定*/
        /*border-bottom-style 枠線(下)のスタイルを指定*/
        /*border-right-style 枠線(右)のスタイルを指定*/
        /*border-left-style 枠線(左)のスタイルを指定*/
        /*値は border-style と同様に指定*/
        border-top-style:double;

        /*border-width 枠線の太さを指定する*/
        /*値は、数値+単位か、thin,medium,thick を指定*/
        border-width:2px;

        /*border-top-width 枠線(上)の太さを指定*/
        /*border-bottom-width 枠線(下)の太さを指定*/
        /*border-right-width 枠線(右)の太さを指定*/
        /*border-left-width 枠線(左)の太さを指定*/
        /*値は border-width と同様に指定*/
        border-top-width:10px;

        /*border-color 枠線の色を指定する*/
        /*値は色コード、色名を指定*/
        border-color:#66ccff;

        /*padding 内容と枠線の間隔を指定する*/
        /*値には数値+単位またはautoを指定*/
        padding:5px;

        /*padding-top 内容と枠線(上)の間隔を指定する*/
        /*padding-bottom 内容と枠線(下)の間隔を指定する*/
        /*padding-right 内容と枠線(右)の間隔を指定する*/
        /*padding-left 内容と枠線(左)の間隔を指定する*/
        /*値はpaddingと同様に指定*/
        padding-top:10px;

        /*margin 枠線の外回りの余白を指定*/
        /*値には数値+単位またはautoを指定*/
        margin:10px;

        /*margin-top 枠線の上側の余白を指定*/
        /*margin-bottom 枠線の下側の余白を指定*/
        /*margin-right 枠線の右側の余白を指定*/
        /*margin-left 枠線の左側の余白を指定*/
        /*値はmarginと同様に指定*/
        margin-top:10px;
}