HTML&CSS 공부하기 6 - inline, inline-block, block

inline

입력한 TEXT 의 크기만큼만 공간을 차지하게 되고, 줄바꿈을 따로 해주지 않는 display 속성입니다.
대표적으로는 태그를 그 예로 볼 수 있는데, span 태그를 사용하면 그 안에 입력한 글자의 크기만큼만 span의 크기가 형성이 됩니다. inline 태그는 width와 height를 적용할 수 없고,margin과 padding-top/bottom 을 적용할 수 없으며, inline-height를 원하는대로 사용할 수 없습니다.

block

block 속성은 inline과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다. 블록요소는 모든 인라인 요소를 포함할 수 있으며, 블록요소도 포함할 수 있습니다.또한, 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈이 됩니다

inline-block

inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 과거에는 float을 이용하여 박스그리드를 만들었지만, 이제 inline-block을 이용하면 더욱 쉽게 만들 수 있습니다.

float을 이용한 예제

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

inline-block을 이용한 예제

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

clear를 쓰지 않아도 됩니다.