[CSS] Block? Inline?

DO YOU KNOW BOX?

블럭과 인라인 요소에 대해 말하기 앞서 요소에 대한 기본적인 내용부터 이야기 하고자한다!

우리가 사용하고 있는 html의 요소들은 모두 랜더링 될 때 BOX모양으로 화면에 표현된다. 박스 안에 박스 넣고 또 박스를 넣고 박스를 옆에두고 위에두고 아래두고... 이러한 박스 모양의 요소들이 모여 하나의 페이지를 구현하게 된다! 그리고 이 박스는 안에 4개의 박스가 모여 하나의 박스가 되어 있는 것인데...

BOX MODEL

BOX 요소는 총 4개의 박스로 이루어져 있는데 이를 박스 모델이라고 한다.

• content
  실질적인 텍스트, 이미지가 들어가는 영역이다.
  width(너비), height(높이)로 크기를 지정한다.
  이때 width와 height에 값을 지정해 주지 않으면 auto로 정해지며,
  width는 부모요소 기준으로 가득차고 height는 자식요소 기준으로 적용된다.
• padding
  안쪽 여백으로 width, height에 padding 값이 더해진다.
• border
  content와 padding을 감싸는 테두리로 width, height에 border-width 값이 더해진다.
• margin
  바깥여백으로 인근 요소와의 여백을 줄 수 있다.

Block? Inline?

이러한 BOX는 block box와 inline box로 2가지 유형으로 구분된다.

기본 크기

block

block이라고 적힌 빨간색은 넓이가 전체를 차지해 한 줄당 한 개씩 있다.

• why?
  블럭은 부모의 넓이만큼 한 줄을 모두 차지하여 자신의 크기 외의 공간은 margin으로 취급하기 때문이다.
  

inline

inline이라고 적힌 파랑색은 딱 글씨만큼의 크기를 차지하고 3개가 나란히 놓여져 있다.

• why?
  인라인은 컨텐츠만큼 크기를 가진다. 또한 블럭처럼 한 줄씩 차지하지않는다.

width, height, padding, boeder, margin

block

• width, height, padding, boeder, margin의 값이 모두 적용되고 있다.
• 다른 요소를 밀어내어 자리를 차지하고 있다.

inline

• boeder: 모두 적용된다.

• width, height: 적용이 안된다.

• margin

  • 상하: 적용 안됨
  • 좌우: 적용 됨

• padding

  • 상하: 적용되지만 부모의 공간을 넘는다.
  • 좌우: 적용됨