inline-block

• inline-block
  

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定) 又呈现 block 特性 (可设置宽高，内外边距) 缝隙问题

<div class="box">
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
</div>
.box{
  border:1px solid green;
  text-align:center;
}
.inner{
  display:inline-block;
  border:1px solid red;
  width:220px;
  padding:10px;
  margin-bottom:10px;
}

注：通过给span标签设置inline-block属性，发现既呈现 inline 特性、又呈现 block 特性 不占据整行又可设置width、height、padding、margin

消除缝隙

1. 两标签并排

<div class="box">
  <span class="inner">welcome,welcome,welcome</span><span class="inner">welcome,welcome,welcome</span>
  <span class="inner">welcome,welcome,welcome</span>
</div>

2. 使用font-size:0(父元素设置0，子元素自定义）

.box{
  border:1px solid green;
  text-align:center;
  font-size:0;
}
.inner{
  display:inline-block;
  border:1px solid red;
  width:220px;
  padding:10px;
  margin-bottom:10px;
  font-size:16px;
}

• line-height
  

行内元素默认以基线对齐，通过添加vertical-align：top / bottom 实现上下对齐

<div class="box">
  <span class="inner first">we</span>
  <span class="inner second">we</span>
</div>
.box{
  border:1px solid green;
  text-align:center;
}
.inner{
  display:inline-block;
  border:1px solid red;
  width:100px;
}
.second{
  padding:20px;
  font-size:80px;
}

.inner{
  display:inline-block;
  border:1px solid red;
  width:100px;
  vertical-align:top;     
}

vertical-align:bottom; 同理实现下边框对齐

line-height：2 行高为font-size的二倍
line-height：200% 行高为父容器font-size 的2倍