CSS : inline / block / inline-block

• inline 은 콘텐츠 크기만큼만 점유하고 줄바꿈을 하지 않는다. 즉 inline 을 사용하면 동일한 line 에 적용 가능하다. width, height, margin, padding-top, padding-bottom 을 적용할 수 없다. 반면에 block 은 콘텐츠 크기보다 더 점유하고 줄바꿈을 한다. 즉 block 을 사용할 경우 화면의 가로를 꽉 채운다. inline 과 다르게 width 등을 모두 사용 가능하다. inline-block 은 inline 과 block 의 가운데 위치한다. inline 처럼 줄바꿈을 하지 않고 콘텐츠 크기만큼 점유한다. 하지만 width 등 본래 inline 이 할 수 없었던 속성 변경이 가능하다.

  • block 요소에 해당하는 태그 : <li> <p> <div> <table> <h1> <footer> <header> 등
  • inline 요소에 해당하는 태그 : <img> <a> <span>

• inline 요소나 block 요소는 css 를 통해서 얼마든지 그 성질을 바꿀 수 있다. display: block 을 하면 성질이 block 으로 바뀐다. 반면에 inline-block 으로 바꾸면 inline 으로 바뀐다. float 은 inline 으로 성질을 바꿔준다.

.classname {
	display: inline-block;
}

tagname {
	display: block;
}

tagname {
	float: left or right;
}