先上demo：
樣式表
<style type="text/css">*{padding: 0;margin: 0;}.inline{border: 1px solid red;padding: 20px;}</style>
html代碼1:
<body> <span class="inline">span</span> <span class="inline">span</span> <span class="inline">span</span></body>
html代碼2
<body><input type="text" class="inline" value="input" /><input type="text" class="inline" value="input" /> <input type="text" class="inline" value="input" /></body>
請大家分別用同樣的樣式表運行上面兩段代碼，會發現一個問題：span的padding－top雖然設定了，但是在瀏覽器中並沒有展現出來，wtf !
那麼問題來了，有人說行內元素不能設定padding－top，但是
1 . span和input 都為行內元素，為什麼對input設定的padding-top值有效呢？
2. 祭出w3c文檔 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
| Value: | <padding-width> | inherit |
| Initial: | 0 |
| Applies to: | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length |
padding適用於全部元素。
當給這兩個元素設定margin－top時，兩者的表現又完全不同。
span對於margin－top無效，而input對於margin－top的設定是完全OK的？為什嗎？看文檔
'margin-top', 'margin-bottom'
| Value: | <margin-width> | inherit |
| Initial: | 0 |
| Applies to: | all elements except elements with table display types other than table-caption, table and inline-table |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length |
These properties have no effect on non-replaced inline elements.
那麼這是為什麼呢？重點來了，
span是行內不可替換元素，而input是行內替換元素，第一次聽說，哭瞎。
先上文檔：
The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)
Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.
The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.
If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if 'width' has a computed value of 'auto', 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
(used height) * (intrinsic ratio)
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無效果。
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
