标签元素的内置padding

ol/ul 列表 

有序列表／无序列表

1. ol/li元素内置padding-left，但是单位是px不是em;
2. 例如Chrome浏览器下是40px；
3. 所以如果字号很小，间距就会很开；
4. 所以如果字号很大，间距会爬到容器外面。

结论：

• 所有浏览器input/textarea输入框内置padding
• 所有浏览器button按钮内置padding
• 部分浏览器select下拉内置padding,如FireFox IE8+可以设置padding
• 所有浏览器radio/checkbox单复选框无内置padding
• button按钮元素的padding最难控制！

FireFox浏览器

设置padding:0 左右依然有padding!

button::-moz-focus-inner { padding:0 }

IE浏览器

IE文字越多，左右padding逐渐变大！

button{ overflow: visible }

button表单按钮padding

padding与高度计算不兼容

button{
 line-height: 20px;
 padding: 10px;
border: none;
}

IE7:       45px;   ?

IE8+:     40px   

FireFox:42px    ?

Chrome:40px

建议

<button id="btn"></button>
<label for="btn">按钮</lable>

lable{
  display: inline-block;
  line-height: 20px;
  padding: 10px;
}

IE7:       40px;   

IE8+:     40px   

FireFox:40px    

Chrome:40px