[CSS] Box model - inline과 Block의 차이점

display: inline ?

대표적인 태그로는 span을 예로 들 수 있는데, Text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. Block 요소는 포함할 수 없다.

너비(width) / 높이(height) 설정이 가능하지 않고 내부에 포함한 콘텐츠 만큼 높이와 너비를 가지게 된다.

display: block ?

대표적인 태그로는 div를 예로 들 수 있는데, 해당 줄의 모든 공간을 점유하고. 다음태그는 무조건 줄바꿈을 한다.

BOX 이다!

BOX ?!

박스는 다른 박스에 포함되거나, 포함할 수 있고, 너비(width) / 높이(height) 설정이 가능하다.

 

박스의 특징

 

BOX의 특징 3가지 :  padding, border, margin

 

1. 패딩(padding) : 콘텐트과 테두리(border) 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

2. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

3. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.