display: inline-block, block, inline

inline과 inline-block의 차이

display:inline과 display:inline-block의 차이는 width와 height을 element에 먹일 수 있다는 것이다.

display:inline-block은 padding,margin을 먹일 수 있지만, display:inline에서는 그렇지 않다.

block과 inline-block의 차이

display:block과 비교했을땐, display:inline-block은 줄바꿈이 없기 때문에 다른 element옆에 나란히 있을 수 있다.

 

inline, inline-block, block의 차이

다음은 display:block display:inline display:inline-block의 차이를 나타내는 코드이다.

 

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 20000000px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}