Inline 박스 요소와 block 박스 요소 간의 차이

썸네일

 

🚀 인라인 박스 vs  블록 박스

---

CSS에는 크게 두 가지 박스 유형이 있는데 바로 블록 박스와 인라인 박스이다. 둘의 차이점을 확인해보자!!

1. 블록 박스

• 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 컨테이너에서 사용 가능한 공간을 채움
• width, height 속성 사용 가능
• padding, margin, border 사용 가능, 해당 속성들이 다른 요소들을 밀어냄

2. 인라인 박스

• 콘텐츠의 크기만큼 박스의 크기가 커지고 작아짐, 따라서 줄 바뀜이 없음
• width, height 속성 사용 불가
• padding, border 속성 사용 가능 하지만 margin은 좌우만 조절 가능, 해당 속성들은 다른 요소들을 밀어내지 않음!!

예시

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

3. 이 span과 div의 두 요소의 특징을 합친 inline-block

• inline처럼 한 줄에 여러 요소가 존재할 수 있으면서도 block처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다.
• 간단히 위의 예제에서 span에만 display: inline-block을 줘보겠다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

이제 inline인 span도 넓이와 높이, 밀어낼 수 있는 능력을 갖게 되었답니다^^ 야호~