日常css技巧小結（2）-- inline-block帶來的迷惑，cssinline-block

日常css技巧小結（2）-- inline-block帶來的迷惑，cssinline-block

一、問題描述

在平時布局中，inline-block使用的頻率比很高，主要是因為可以讓列標籤設定寬高。我在版面配置階段中，發現了兩個“問題”，

1列標籤.display：inline-block之後的列標籤之間有4像素的間距；https://jsfiddle.net/firelight/69phh891/

2.對display：inline-block的列標籤設定margin：0 auto；也不會在父級置中。https://jsfiddle.net/firelight/jh5ojqu6/

我開始對display：inline-block的理解是：既是列標籤也是塊標籤。隨著這兩個問題的出現發現並不是簡單的1+1=2。

二、捋一捋概念

• block
  • 會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
  • 可以設定width,height屬性。區塊層級元素即使設定了寬度,仍然是獨佔一行。
  • 可以設定margin和padding屬性
• inline
  • 不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
  • 設定width,height屬性無效。
  • margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
• inline-block
  • W3school：An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
  • 對上一句我的理解是：inline-block元素本身還是列標籤，但當對其設定某屬性時具有塊標籤的特點。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

三、解析問題

1、display：inline-block之後的列標籤之間有4像素的間距；？
起初我認為是inline-block帶來的問題，結果當我把inline-block去掉，這4個像素依然存在。在張鑫旭的一篇部落格中，解釋這個是符合規範的應有的表現，元素間留白間距出現的原因就是標籤段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。當然還有N種在不影響HTML代碼結構的情況下解決這個問題的方法，就不在此贅述。可以參考張鑫旭的文章：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove

2、對display：inline-block的元素設定margin：0 auto；也不會置中？

margin：0 auto；是設定塊標籤在父級中置中對齊，是一種對齊。所以對於display：inline-block，設定margin：0 auto；此時是其本身的列標籤性質佔上風（而列標籤本身預設靠左對齊），所以並不起作用。應該在其父級設定text-align：center來置中對齊。如果設定具體的margin，上下左右四個方向還是可以的。https://jsfiddle.net/firelight/jh5ojqu6/1/