inline-block

• inline-block

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

  welcome,welcome,welcome
  welcome,welcome,welcome
  welcome,welcome,welcome

.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. 两标签并排

  welcome,welcome,welcomewelcome,welcome,welcome
  welcome,welcome,welcome

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 实现上下对齐

  we
  we

.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倍