[CSS] Block vs. Inline

본 포스팅에선 CSS display 속성 값 block에 대해 간단히 알아본다.

🐵 Block

Block 이란 해당 요소가 한 줄을 모두 차지한다, 즉 다른요소가 옆에 나란히 위치할 수 없다 라는 뜻이다.

block 요소의 예
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>

🐵 Inline

Inline 은 문자그대로 해당 요소가 같은 한 줄에 나란히 위치할 수 있다 라는 뜻이다.

inline 요소의 예
<span>, <a>, <img>

다음 그림을 보면 쉽게 이해가 된다.

그림처럼 block은 사이즈에 상관없이 요소 하나당 한줄을 모두 차지한다. 반면 inline 요소들은 사이즈에 따라 남은 공간에 다음 inline요소가 들어온다.

block요소를 inline으로 바꾸는 방법

p {
  display: inline-block;
}
p {
  float: left;
}

1) display 속성값을 변경하거나, 또는 2) float 속성값을 주는 방법이 있다.

inline요소를 block으로 바꾸는 방법

span {
  display: block;
}

display 속성값을 사용 해 바꿀수 있다.