點擊看效果demo
對於單選和多選框一般都會用相應的文字進行搭配使用，干活不累。
但是最原始沒有任何樣式的單選和復選和文字在一起搭配起來並不美觀，會因為字體大小存在上下參差。
平時經常踩這個坑，一般設置單選和復選的vertical-align，外加margin輔助達到效果。
現在看了大牛的博客，把他總結的方法予以學習。
單復選框與文字默認以vertical-align:baseline的方式對齊的。
對於不同的字體差距會有些許不同，根據字體調整樣式的數值就好了。
radio單選框的默認margin值是：margin:3px 3px 0 5px;checkbox復選框的margin值為margin:3px 3px 3px 4px;而IE瀏覽器下似乎沒有margin值，但是對margin敏感
以下先給出文字字體大小12px的解決方法
方法1：
以vertical-align:text-bottom為基礎的
方法2：
以vertical-align:text-top為基礎的
方法3：
以vertical-align:bottom為基礎的
方法4：
以vertical-align:top為基礎的
方法5：
以vertical-align:middle為基礎的
谷歌下5種方法各自對應的效果如下：
IE11下5中方法各自對應的效果如下：
針對兩種瀏覽器來說，方法1 3 5表現良好趨於一致，其中3 5方法是文章底部博客鏈接作者所推薦的。
附上源代碼中的方法源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 12px;
text-align: center;
margin-bottom: 20px;
}
.method1 {
vertical-align: text-bottom;
margin-bottom: 1px;
}
.method2 {
height: 13px;
vertical-align: text-top;
margin-top: 2px;
}
.method3 {
height: 13px;
vertical-align: bottom;
margin-bottom: 1px;
margin-top: -1px;
}
.method4 {
height: 13px;
vertical-align: top;
margin-top: 2px;
}
.method5 {
vertical-align: middle;
margin-top: -1px;
margin-bottom: 1px;
}
.method6 {
vertialc-align: -3px
}
</style>
</head>
<body>
<div>
<input class="method1" name="Fruit" type="checkbox" value="" />
<span>蘋果</span>
</div>
<div>
<input class="method2" name="Fruit" type="checkbox" value="" />
<span>桃子</span>
</div>
<div>
<input class="method3" name="Fruit" type="checkbox" value="" />
<span>香蕉</span>
</div>
<div>
<input class="method4" name="Fruit" type="checkbox" value="" />
<span>梨</span>
</div>
<div>
<input class="method5" name="Fruit" type="checkbox" value="" />
<span>西瓜</span>
</div>
<div>
<input class="method6" name="Fruit" type="checkbox" value="" />
<span>火龍果</span>
</div>
<div>
<input class="method1" name="Fruit" type="radio" value="" />
<span>蘋果</span>
</div>
<div>
<input class="method2" name="Fruit" type="radio" value="" />
<span>桃子</span>
</div>
<div>
<input class="method3" name="Fruit" type="radio" value="" />
<span>香蕉</span>
</div>
<div>
<input class="method4" name="Fruit" type="radio" value="" />
<span>梨</span>
</div>
<div>
<input class="method5" name="Fruit" type="radio" value="" />
<span>西瓜</span>
</div>
<div>
<input class="method6" name="Fruit" type="radio" value="" />
<span>火龍果</span>
</div>
</body>
</html>
參考來源http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%8D%E9%80%89%E6%A1%86%E6%88%96%E5%8D%95%E9%80%89%E6%A1%86%E4%B8%8E%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90%E7%9A%84%E9%97%AE%E9%A2%98%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E4%B8%80/