内联元素的padding-top属性

If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.1. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.

Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.

注意加粗的内容，可替换元素是具有内部的宽，高，或者宽高比的。

总结：

对于input这种替换元素，margin和padding各方向均有作用，

对于span，a等这些不可替换元素，

　　padding-left,padding-right均有效果,padding-top无效果。

　　经评论中@meta-D的提醒，后经验证，padding－bottom无效，只是对border的样式产生了影响。配图请看评论。

　　margin-right,margin-left均有效果，margin-top,margin-bottom无效果。

4.16更新：

　　最近在看css权威指南的时候，书上写：非替换元素的内边距，边框和外边距对行内元素及其生成框没有垂直效果；也就是说，他们不会影响行内框的高度。（还是得多看书啊）

总感觉文章写的半吊子，先这样，大家可以看看下面的链接，等我再深入地挖一挖坑。

相关链接（需要楼梯越过高墙）：

　　http://maxdesign.com.au/news/inline/

　　http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element

　　http://melon.github.io/blog/2015/03/07/inline-replaced-vs-inline-nonreplaced/

　　http://reference.sitepoint.com/css/replacedelements

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com