以下のように、display:inline又はinline-blockの子要素を2つ並べると謎の余白ができることがあります。そのそもdisplayプロパティとは何かについてはこちらをご覧下さい。

　～　inline-blockで謎の余白が発生　～　

• 結果

• HTML

• CSS

• A

  B

  　「A」と「B」の間に謎の余白ができてしまいます。margin:0;やpadding:0;を指定しても効果がありません。
  　余白を選択すると何か空白文字があるようです。

• /* HTMLの例 */
  
  		
  
  			
  A
  			
  B
  		
  	

• /* CSSの例 */
  /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
  
  .sample0 {
  }
  
  .sample1 {
  	display:inline-block;
  }
  
  .sample2 {
  	display:inline-block;
  }
  	

　～　inlineで謎の余白が発生　～　

• 結果

• HTML

• CSS

• A

  B

  　inline-blockと同じく「A」と「B」の間に謎の余白ができてしまいます。
  　inline-blockと同じく余白を選択すると何か空白文字があるようです。

• /* HTMLの例 */
  
  		
  
  			
  A
  			
  B
  		
  	

• /* CSSの例 */
  /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
  
  .sample3 {
  }
  
  .sample4 {
  	display:inline;
  }
  
  .sample5 {
  	display:inline;
  }
  	

解決方法：親要素にfont-size:0;を指定する。

　inline-block、inlineどちらの場合も親要素にfont-size:0;を指定することで、余白がなくなります。ただし、親要素にfont-size:0;を指定すると子要素に継承されてしまいますので、子要素に対しては新たにfont-sizeを指定し直す必要があります。

　～　inline-block　～　

• 結果

• HTML

• CSS

• A

  B

• /* HTMLの例 */
  
  		
  
  			
  A
  			
  B
  		
  	

• /* CSSの例 */
  /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
  
  .sample6 {
  	font-size:0; /* 子要素がinline-blockの場合に不要な余白を防ぐため */
  }
  
  .sample7 {
  	font-size:10px; /* 親要素でfont-size:0;を指定したため */
  	display:inline-block;
  }
  
  .sample8 {
  	font-size:10px; /* 親要素でfont-size:0;を指定したため */
  	display:inline-block;
  }
  	

　～　inline　～　

• 結果

• HTML

• CSS

• A

  B

• /* HTMLの例 */
  
  		
  
  			
  A
  			
  B
  		
  	

• /* CSSの例 */
  /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
  
  .sample9 {
  	font-size:0; /* 子要素がinline-blockの場合に不要な余白を防ぐため */
  }
  
  .sample10 {
  	font-size:10px; /* 親要素でfont-size:0;を指定したため */
  	display:inline;
  }
  
  .sample11 {
  	font-size:10px; /* 親要素でfont-size:0;を指定したため */
  	display:inline;
  }