两个inline-block消除间距和对齐（vertical-align）
?
一、神奇的兩個inline-block
? ? ? 很初級的問題，無聊決定寫一個故事。
? ? ? ?故事的主人公很簡單，兩個inline-block元素。代碼如下，為了看起來簡單明了，寫得很簡陋。效果圖如右。發(fā)現(xiàn)有兩個問題。
? ? ? ?1：兩個元素水平有空隙，簡單的初始化margin：0好像并沒有起想象中的作用，為什么呢
? ? ? ?2：兩個元素垂直也沒有對齊，等高的的行內塊元素不應該阿:
二、消除兩個inline-block元素水平間距
最終效果
講解demo
<div class="space"><a href="##">惆悵</a><a href="##">淡定</a>
<a href="##">熱血</a> </div>
1.去空格
元素間留白間距出現(xiàn)的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：
<div class="space"><a href="##">惆悵</a><a href="##">淡定</a><a href="##">熱血</a> </div>或者是：
<div class="space"><a href="##">惆悵</a><a href="##">淡定</a><a href="##">熱血</a> </div>或者是借助HTML注釋：
<div class="space"><a href="##">惆悵</a><!----><a href="##">淡定</a><!----><a href="##">熱血</a> </div>等。
2、使用margin負值
.space a {display: inline-block;margin-right: -3px; }例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。
由于外部環(huán)境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規(guī)模使用。
3、讓閉合標簽吃膠囊
如下處理：
<div class="space"><a href="##">惆悵<a href="##">淡定<a href="##">熱血</a> </div>注意，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標簽的結束（閉合）標簽不能丟。
在HTML5中，我們直接：
<div class="space"><a href="##">惆悵<a href="##">淡定<a href="##">熱血 </div>好吧，雖然感覺上有點怪怪的，但是，這是OK的。
4、使用font-size:0
類似下面的代碼：
.space {font-size: 0; } .space a {font-size: 12px; }這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器，就是Chrome, 其默認有最小字體大小限制，因為，考慮到兼容性，我們還需要添加：
類似下面的代碼：
5、使用letter-spacing
類似下面的代碼：
.space {letter-spacing: -3px; } .space a {letter-spacing: 0; }6、使用word-spacing
類似下面代碼：
.space {word-spacing: -6px; } .space a {word-spacing: 0; }三、使兩個inline-block元素垂直對齊、
元素在父元素垂直居中有許多辦法：
1，設置父元素line-hight等于父元素高度
2.設置父元素的after偽類，寬度為0，高度為100%的行內塊和元素垂直居中，再設置vertical-align: middle;
3.父元素table-cell，再給父子元素設置vertical-align: middle等（CSS垂直居中的11種實現(xiàn)方式）
?
首先什么是基線？元素的基線怎么確定？
對于inline-block元素來說，他的基線取決于元素本身的特性，
在該元素中沒有行內子元素（注意是DOM樹的子元素，塊子元素中有行元素這個行元素算）的時候或者overflow不為visible，該inline-block的基線為margin-bottom的下邊界。
否則，以該元素中最后一個行內子元素的基線為該元素的基線。
字母x的下邊緣(線)就是我們的基線baseline。（以下是幾種默認的基線對齊形式）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
?元素是怎么垂直對齊的？
vertical-align設置行內元素的基線相對于該元素所在行的基線的垂直對齊方式。
如a設置middle，b默認。則a的middle和b的bsaeline對齊
vertical-align：middle指的是baseline + 1/2?"x-height"高度。我們可以近似腦補成字母x交叉點那個位置。
?
vertical-align:baseline(，默認元素的基線與父元素的基線對齊) vertical-align:sub(降低元素的基線到父元素合適的下標位置) vertical-align:super(升高元素的基線到父元素合適的上標位置) vertical-align:bottom(把對齊的子元素的底端與行框底端對齊) vertical-align:text-bottom(把元素的底端與父元素內容區(qū)域的底端對齊，當line-height設置時與bottom顯示不同) vertical-align:top(把對齊的子元素的頂端與行框頂端對齊) vertical-align:text-top(把元素的頂端與父元素內容區(qū)域的頂端對齊) vertical-align:middle(元素的中垂點與父元素的基線加1/2父元素中字母X的高度對齊)vertical-align:(+-n)px(元素相對于基線上下偏移npx) vertical-align:x%(相對于元素的line-height值) vertical-align:inherit(從父元素繼承vertical-align屬性的值)
?
舉個例子，正常div，高度自適應，并且有一張圖片。
會發(fā)現(xiàn)有一端留白，這段空白間隙就是vertical-align和line-height攜手搞的鬼。
實際上塊狀元素內部還有一個（更有可能兩個-前后）看不見摸不著沒有寬度沒有實體的空白節(jié)點
為了明顯一點這個寬度為0的空格元素我們用inline-block來代替
可以看到圖片的下邊緣就和字母x下邊緣對齊（見下圖）
但是字符還是有高度的，由line-height決定（默認normal，1.2倍font-size）
?
怎么消除這種留白呢
1. 讓vertical-align失效
將圖片設置成display或者浮動、絕對定位等（如果布局允許）
2. 使用其他vertical-align值
告別baseline, 取用其他屬性值，比方說bottom/middle/top都是可以的。
3. 直接修改父元素line-height值
空白部分其實是是文字計算后的行高底部和字母x下邊緣的距離，如把line-height設置為0
4. line-height為相對單位，font-size間接控制
?
原理同上，如把font-size設置為0
③ 基本現(xiàn)象衍生：垂直居中
圖片后面（前面）有個類似空格字符的節(jié)點，然后就能響應line-height形成高度，此時，圖片再來個vertical-align:middle，就可以和這個被行高撐高的「幽靈空白節(jié)點」(近似)垂直對齊了。
不過上面的效果并不是完全的垂直居中，因為middle中線位置(字符x的中心)并不是字符內容的絕對居中位置
?
div { line-height: 240px; font-size: 0; } img { vertical-align: middle; }?font-size:0, 因此此時content area高度是0，各種亂七八糟的線都在高度為0的這條線上，絕對中心線和中線重合。自然全垂直居中：
?
轉載于:https://www.cnblogs.com/coderL/p/7460437.html
總結
以上是生活随笔為你收集整理的两个inline-block消除间距和对齐（vertical-align）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python圣地
- 下一篇： 02html和css