inline-block은 자주 사용되지 않고 좋지 않다.
그 이유는 컨트롤 하기가 어렵기 때문이다. 아래 코드를 실행해보면 브라우저에서 가로세로 50px이고 배경색이 teal 인 박스들이 좌우로 생긴다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: teal;
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
위 그림과 같이 나타나는데 여기서 저 블록들 사이에 있는 간격은 컨트롤 할 수가 없다. 실제로 margin: 0; padding: 0; 이런식으로 해도 간격은 사라지지 않는다.
위 html 코드에 <div> 태그를 계속 추가해서 좌우로 화면에 꽉 차게 만들어보면 맨 마지막에 남는 간격이 블록들 사이에 있는 간격과는 다르게 간격이 생기는 것도 컨트롤 할 수가 없다. 그 간격을 잘 맞추기 위해 margin 값을 정확한 픽셀값을 넣는다 해도 다른 모니터 화면에서는 또 망가진 간격이나 블럭이 하나 아래로 내려오거나 할 것이다.
이런 이유들로 display: inline-block 은 잘 사용하지 않는다.
출처: (https://nomadcoders.co)
Dom Hardy : 멋쟁이 개발자 되기 인생 프로젝트 진행중