MW211 EXIT

devlog
CSS/ネガティブマージンとボーダーⅡ
2014年02月19日
ネガティブマージンの対象を変えれば、自分の領域を減らすっぽいことができる。
  「margin-bottom:-1em;」→「margin-top:-1em;」
┌───────────┐  ┌───────────┐
│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-top    :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│}                     │  │}                     │
├───────────┤  ├───────────┤
│                      │  │    ┌───┬─┐    │
│                      │  │    │      │  │    │
│‥‥┌───┬─┐‥‥│  │‥‥│  A  │  │‥‥│
│    │      │  │    │  │    │      │  │    │
│    │  A  │  │    │  │    ├───┘  │    │
│    │      │  │    │  │    │        a│    │
│    ├───┘  │    │  │    ├───┬─┤    │
│    │        a│    │→│    │      │  │    │
│    ├───┬─┤    │  │    │  B  ├─┤    │
│    │      │  │    │  │    │      │  │    │
│    │  B  ├─┤    │  │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │
└───────────┘  └───────────┘
もちろん玉突き式に反対側に迷惑をかけることになるのだが、
ウインドウの端っこであれば、ごまかすこともできる。
分類:CSS