「border」で周囲に線を引くと、その分、その領域が占領する面積が増えてしまう。
その結果、隣の領域を追い出す形になる。

そこで、ネガティブマージンを使えば追い出さないようにすることができる。
┌───────────┐  ┌───────────┐
│div#A {               │  │div#A {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│  border-right  :1em; │  │  border-right  :1em; │
│  border-bottom :1em; │  │  border-bottom :1em; │
│                      │  │  margin-bottom :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; ├───────────┐
│}                     │  │}                     │以下ではない          │
├───────────┤  ├───────────┼───────────┤
│    ┌───┬─┐    │  │    ┌───┬─┐    │    ┌───┬─┐    │
│    │      │  │    │  │    │      │  │    │    │  Ａ  │  │    │
│    │  Ａ  │  │    │  │    │  Ａ  │  │    │    ├───┘  │    │
│    │      │  │    │  │    │      │  │    │    │        ａ│    │
│    ├───┘  │    │  │    ├───┤  │    │    ├───┬─┤    │
│    │        ａ│    │→│    │      │ａ│    │    │      │  │    │
│    ├───┬─┤    │  │    │  Ｂ  ├─┤    │    │  Ｂ  ├─┤    │
│    │      │  │    │  │    │      │  │    │    │      │  │    │
│    │  Ｂ  ├─┤    │  │    ├─┬─┼─┤    │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │    └─┴─┴─┘    │
└───────────┘  └───────────┴───────────┘

ここで、間違ってはいけないのが、ネガティブマージにより
自分の本丸を小さくするのではないということ。
隣の領域の開始位置を自分の領域に食い込ませる、つまり、踏んづけてもよしと
するというのがネガティブマージンだ。

つまり、上記のように、「border」と「-margin」を同じ値にするということは、
「boder」の分、自分の領域を減らすのではなく、「border」の上に
のっかてもいいよと許可を出すみたいなもんだ。
もちろん「border＜-margin(の絶対値)」の場合には、
「boder」の内側、つまり自分の領域に浸食されることになる。

つまり、「border」と「-margin」を同じ値にするということは、
他人の領地を侵略しないということではなく
他人の領地を侵略しておいて(線を引いておいて)、
自由にそこに物を置いてもいいですよと言っているようなもんだ。

「ctrl」キーを押しながら「↑」「↓」「←」「→」のいずれかのキーを押すと
そのセルから最も近いデータのあるところまで移動する。
データがなければシートの端っこへ移動する。

これを「ctrl」を押さなくても常時やってくれるモードがある。
「Endモード」という。
文字通り「End」キーを押せばそのモードになる。
もちろん解除も「End」キー。

のIEではマージン相殺が効かない場合があった。
IE7以前の話。

IE7以前(IE6、IE7)では、「hasLayout:true;」だとマージン相殺が効かなかった。
「hasLayout」については別途記載したのでそちらを参照ということで、
これを回避する方法のお話。

CSSハックを使う。
┌──────────────────────────────────────┐
│div {                                                                       │
│    margin-bottom   : 1em;                                                  │
│    *margin-bottom  : 0;    /* IE7以下に適用 */                             │
│}                                                                           │
└──────────────────────────────────────┘
頭に「*」をつければ、IE7以下のみに適用されるプロパティとなるので、
これを上書してあげる形とする。

IE8以降では廃止となったが、
IE6、IE7において「hasLayout」という読取専用プロパティがあった。

既定は「false」で、CSSで以下のいずれかを指定した場合に「true」になるという
代物であった(直接の指定はできない)。
  「display:inline-block;」、「position:absolute;」、
  「float:left;」、「float:right;」、
  「height:■;」、「width:■;」、「zoom:■;」(拡大率(IE独自規格))、
  「writing-mode:tb-rl;」(縦書(IE独自規格))

で、「hasLayout:false;」の時に、
IE6で表示がおかしくなってしまうことがあったそうだ。
(IE7でズームをおこなっても同じ)

なので、敢えて「zoom:1;」とか無害なプロパティを定義して
「hasLayout:true;」にしていたらしい。

CSSを特定のブラウザだけに有効にさせる記法を「CSSハック」という。

【IE6】
  先頭に「_」をつける
  ┌─┬──────────────────────────────────┐
  │例│_color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE7以下】
  先頭に「*」をつける
  ┌─┬──────────────────────────────────┐
  │例│*color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE8以下】
  末尾に「\9」をつける
  ┌─┬──────────────────────────────────┐
  │例│color   :#FFFFFF\9;                                                 │
  └─┴──────────────────────────────────┘

マージン(margin)が隣接していると、長い方が採用され、短い方が無視される。
「マージン相殺」である。

「マージン相殺」は垂直方向(縦方向)でのみ起こり、
水平方向(横方向)では起きない。

以下の二つの種類がある。(以下の図は便宜上90度回転している(本来は縦向き))
┌─────────┬──────────────┐
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│(隣接)マージン相殺││          │⇒│        ││
│                  ││    ←─┤│  │ ←─┤ ││
│                *1│└─────┘  └────┘│
├─────────┼──────────────┤
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│入れ子マージン相殺││          │⇒│        ││
│                  ││   ├─→ │  │├─→  ││
│                *2│└─────┘  └────┘│
└─────────┴──────────────┘
  *1：float同士の場合は相殺が起こらない
  *2：float同士の場合は相殺が起こらない
      また、親要素に「padding」「border」 が含まれているか
      「overflow:hidden」、「overflow:scroll」か
      「position:absolute」、「position:fixed」かの場合にも
      相殺が起こらない

例えば、以下のような入れ子の場合…
┌──────────────────────────────────────┐
│div#外側 {                                                                  │
│    height              :4em;                                               │
│    width               :4em;                                               │
│}                                                                           │
│div#内側 {                                                                  │
│    height              :2em;                                               │
│    width               :2em;                                               │
│    margin              :1em;                                               │
│}                                                                           │
└──────────────────────────────────────┘
以下のようなイメージになる。
┌──────────────────────────────────────┐
│                                                                            │
│┌─┬─┬─┐                                                              │
││  │  │  │                                                              │
││  └─┘  │                                                              │
││          │                                                              │
│└─────┘                                                              │
└──────────────────────────────────────┘
縦方向は外側「margin:0;」と内側「margin:1em;」が操作されて
「margin:1em;」となる(外側から見た場合「相殺」とイメージではないが相殺だ)。
内側は外側が「margin:0;」のまま、内側が「margin:1em;」のままなので
センタリングされたような形になる。

縦方向には「margin:0;」と同じになる。

横方向の場合は、「margin:残り100%;」と同じになる。
よって、左右両方に「margin:auto;」があると、「margin:残り50%;」と同じになる。

なので、「margin:auto;」は縦方向(上)に対しては「0」で
横方向(左右)に対してはセンタリングした形となる。

また、「float」の場合には、横方向に対しても「margin:0;」となる。

「php.ini」の中身に「session.save_path」で定義されている。
┌──────────────────────────────────────┐
│session.save_path="C:\Windows\Temp"                                         │
└──────────────────────────────────────┘

次に、「top」、「clientTop」、「scrollTop」、「offsetTop」。
「hegiht」とは概念が違うので注意。

┌─────┬───────────────────────────────┐
│      top │本来の領域からずれた縦幅                                      │
│clientTop │＝padding(ずれた後の中身までの縦幅)                           │
│scrollTop │見えない領域の先頭からの縦幅                                  │
│offsetTop │bodyからの縦幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘

「left」の場合も同様。
┌─────┬───────────────────────────────┐
│      left│本来の領域からずれた横幅                                      │
│clientLeft│＝padding(ずれた後の中身までの横幅)                           │
│scrollLeft│見えない領域の先頭からの横幅                                  │
│offsetLeft│bodyからの横幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘

次に、「height」、「clientHeight」、「scrollHeight」、「offsetHeight」。
┌──────┬───────────────────────────────┐
│      height│＝height                                                      │
│clientHeight│＝height＋padding                                             │
│scrollHeight│＝height＋padding                               ＋見えない領域│
│offsetHeight│＝height＋padding＋scrollbar＋border                          │
└──────┴───────────────────────────────┘
  ・「clientHeight」と「scrollHeight」は基本的に同じだが、
    スクロールバーが発生して見えない領域がある場合、
    「scrollHeight」はそれも含むという違いがある
  ・昔のIEでは「scrollHeight」の仕様が違う
    スクロールしていない場合は、中身のサイズのみ
    (つまり短いスクロールバーがあるであろうサイズのみ)を返していた
  ・スクロールバーが表示されると、
    paddingの内側が短く(実際に短くなるのはheight)なるが、
    「offsetHeight」以外はその煽りを受けて短くなってしまう
  ・「scrollHeight＋scrollbar＋border」という全部盛りは用意されていない
    「border」は「.css('border-top-width')」と「.css('border-bottom-width')」で
    算出できるが、「scrollbar」は「約16px」とかが使われたりする
    「＝offsetHeight－clientHeight＋scrollHeight」でできそうな感じがするが

「width」の場合も同様。
┌──────┬───────────────────────────────┐
│      width │＝width                                                       │
│clientWidth │＝width＋padding                                              │
│scrollWidth │＝width＋padding                                ＋見えない領域│
│offsetWidth │＝width＋padding＋scrollbar＋border                           │
└──────┴───────────────────────────────┘

但し、情報が錯綜しているので、本当かどうかは今後検証していく。
ブラウザによる違いとかもありそう。