MW211 EXIT

devlog
CSS/blockとinline
2014年03月12日
「block」と「inline」があって、その中間に「inline-block」がある。
┌───────────┬──────────────────────────┐
│         CSS          │                      主なタグ                      │
├───────────┼──────────────────────────┤
│display:block;        │div、table                                          │
├───────────┼──────────────────────────┤
│display:inline-block; │img、input、select、textarea                        │
├───────────┼──────────────────────────┤
│display:inline;       │span、a                                             │
└───────────┴──────────────────────────┘
┌─────────────────┬──────┬──────┬──────┐
│                                  │   block    │inline-block│   inline   │
├─────────────────┼──────┼──────┼──────┤
│行の占有                          │     ○     │     ×     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「height」「width」の指定         │     ○     │     ○     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「padding」の指定                 │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「margin」の指定                  │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「vertical-align」の指定          │     ×     │     ○     │     ○     │
└─────────────────┴──────┴──────┴──────┘
  ・昔のブラウザでは「inline-block」は未対応だった(「block」扱いとなる)
    #IEはIE8以降で対応、Firefox等も昔は未対応だった
  ・昔のIEでは「inline」でも「height」「width」の指定ができた
分類:CSS