display inline-block 정렬일 때 사이 공백

ul li 요소들을  display:inline-block; 을 사용하여 정렬을 하면 li 들 사이에 공백이 생긴다. 

 

 

 

 

 

해결방법

 

감싸는 부모에 font-size:0; 주기 

또는 margin 음수값으로 조절하기 등이 있습니다. 

보통 저는 font-size:0을 하거나 float 를 이용합니다. 

 

 

 

ul{
  overflow:hidden;
  font-size:0;
}
li{
  display:inline-block;
  padding:5px;
  background-color:gold; 
  font-size:15px;
}
  

 

 

 

 

 

참고

https://css-tricks.com/fighting-the-space-between-inline-block-elements/