CSS - Display-inline, inline-block, block

Element (요소)에는 다음과 같이 Block level Element와 Inline Element가 있다.

👉🏻 Block level Element

• 웹페이지 상에서 블록을 만드는 것으로, element 사이에 새로운 줄을 만든다. lnline element에 중첩될 수 없다. ex) p,li,nav, footer,div 등

👉🏻 Inline Element

• 항상 block level element에 포함되어 있으며, 문장과 단어 등 작은 부분에만 적용이 가능하며, 새로운 줄을 만들지 않는다. ex) a, em, strong, span 등

위 이미지에서 Display 값에 대한 변화를 알아보려 한다.

1. inline

inline은 텍스트의 값에 따라 크기가 정해지는 것을 볼 수 있다. 그리고 가로로 박스가 정렬이 된다. padding과 margin 값은 적용이 되지만 width, height의 값은 적용되지 않는다.

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: red;
  display: inline;
}

2. inline-block

inline-block은 inline + block이 섞여 있는 거라 보면 쉽다. inline과 같이 텍스트 값에 따라 크기가 정해지지만, block과 같이 width, height, padding, margin 값이 모두 적용되며 가로로 정렬된다.

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: red;
  display: inline-block;
}

span {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: pink;
  display: inline-block;
}

3. block

block은 한 영역을 차지하는 박스의 형태로 기본 width값이 100%이다. width, height, padding, margin 값이 모두 적용되며 기본적으로 상하배치된다.

span {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: pink;
  display: block;
}

• css