置換インライン要素の縦方向の位置をborderで調節してみたサンプル

チェックボックスのサンプル

サンプル1（vertical-align:baseline;）

サンプル2（vertical-align:baseline; border-bottom:2px solid transparent;）

サンプル3（vertical-align:baseline; border-bottom:2px solid transparent; padding-bottom:10px;）

サンプル1（vertical-align:baseline;）

サンプル2（vertical-align:baseline; border-bottom:2px solid transparent;）

サンプル3（vertical-align:baseline; border-bottom:2px solid transparent; padding-bottom:10px;）

サンプル1（vertical-align:baseline;）

サンプル2（vertical-align:baseline; border-bottom:2px solid transparent;）

サンプル3（vertical-align:baseline; border-bottom:2px solid transparent; padding-bottom:10px;）

XHTML 1.0 Strict(XML宣言無)

encoding: UTF-8