WEB+DB PRESS Vol.66で知ったのですが、HTMLレイアウト設計時には、ブロック要素なのか、インライン要素なのか、インラインブロック要素なのかを考慮して要素指定を決定するという考えは良さそうです。
| 項目 | ブロック要素 | インライン要素 | インラインブロック要素 |
| 並ぶ方向 | 縦 | 横 | 横 |
| width指定 | ○ | × | ○ |
| height指定 | ○ | × | ○ |
| margin指定 | 上下左右 | 左右 | 上下左右 |
| padding指定 | 上下左右 | 左右 | 上下左右 |
| vertical-align指定 | × | ○ | ○ |
| 例 | h1,p,ul,form,hr,table,div | a,span,em,strong | img,input,textarea,select |
同じ記事内で、HTMLコーディングフローは次の手順になるということでした。
- 情報構造の骨組み ツリー構造化の検討
- デザインの肉付け CSSレイアウト
- 情報構造の調整 隙間なく四角形のブロックで埋め込む
興味のある方は、WEB+DB Press Vol.66を読んでみてください。なかなか面白い内容でした。