┬──────────────────────────────────────┬
│概要                                                                        │
┴──────────────────────────────────────┴
  tableタグの場合、既定だと余白が開いてしまう
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  ├────────────────────────────────────┤
  │<table>                                                                 │
  │  <tr><td>■</td><td>■</td></tr>                                       │
  │  <tr><td>■</td><td>■</td></tr>                                       │
  │</table>                                                                │
  ├──────────────────┬─────────────────┤
  │「border-collapse:separate;」の場合 │┌──────┐                  │
  │                              (既定)││┌─┐┌─┐│                  │
  │                                    │││■││■││                  │
  │                                    ││└─┘└─┘│                  │
  │                                    ││┌─┐┌─┐│                  │
  │                                    │││■││■││                  │
  │                                    ││└─┘└─┘│                  │
  │                                    │└──────┘                  │
  ├──────────────────┼─────────────────┤
  │「border-collapse:collapse;」の場合 │┌─┬─┐                        │
  │                                    ││■│■│                        │
  │                                    │├─┼─┤                        │
  │                                    ││■│■│                        │
  │                                    │└─┴─┘                        │
  └──────────────────┴─────────────────┘
┬──────────────────────────────────────┬
│既定とは                                                                    │
┴──────────────────────────────────────┴
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
  上記を記述した場合、下のような既定パラメータが付加される感じになる
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :2px 2px;                                           │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │    padding         :1px 1px;                                           │
  │}                                                                       │
  └────────────────────────────────────┘
┬──────────────────────────────────────┬
│collapse                                                                    │
┴──────────────────────────────────────┴
  「separate」の余白を削りまくっても「collapse」になるわけではない
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :0;                                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
    ┏━┳━┓                                                    ┌───  
    ┃■┃■┃太線のようになってしまう                            │  │  │
    ┣━╋━┫これは二重線だからだ          これを回避するためには│─┘─┘
    ┃■┃■┃                          右のように分担させればよい│  │  │
    ┗━┻━┛                                                      ─┘─┘
  つまり、これが「collapse」である
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :collapse;                                          │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  ├────────────────────────────────────┤
  │table {                                                                 │
  │    border-top      :1px solid #000000;                                 │
  │    border-left     :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :0;                                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border-bottom   :1px solid #000000;                                 │
  │    border-right    :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
┬──────────────────────────────────────┬
│文字自体の余白(文字の下の余白)                                              │
┴──────────────────────────────────────┴
  「font-size:16px;」と指定しても、実際には縦幅だけ「17px;」となる場合がある
  これは「g、j、p、q、y」といったベースラインを下にはみ出る文字への対策として
  下に「padding」より内側の余白が付加されるイメージだ
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  以下のように指定すれば、上記が解消される
  ┌────────────────────────────────────┐
  │* {                                                                     │
  │    line-height         :100%;                                          │
  │}                                                                       │
  └────────────────────────────────────┘
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  画像についても同様に下余白が付く場合がある
  これは以下のように指定すれば解消できる
  ┌────────────────────────────────────┐
  │img {                                                                   │
  │    vertical-align      :bottom;                                        │
  │}                                                                       │
  └────────────────────────────────────┘
────────────────────────────────────────