인라인(Inline) , 블록(Block) , 인라인블록(Inline - block) 알아보기(+미완)

(썸네일)

 

웹 문서를 이루고 있는 요소들은 박스 모델이다

기본적인 박스 모델에 대해 알아보고 그 다음 박스모텔의 종류인 블록,인라인, 인라인 블록에 대해 알아보자

(1) 박스 모델(Box model) 

콘텐츠: 내용일 들어갈 자리

패팅: 박스와 콘텐츠 영역 사이의 여백

테두리: 박스의 테두리

마진: 박스 모델들 사이의 여백

 

(2) 

	inline	block	inline-block
기본 너비	컨텐츠만큼	부모의 너비만큼	컨텐츠만큼
width, height 속성	무시	적용	적용
가로공간 차지	공유	독점	공유
margin 속성 ( 바깥쪽 여백 )	가로만 적용	모두 적용 ( 상하는 다른것과 서로 겹칠시 더 큰 것을 기준으로 상쇄 )	모두 적용
padding 속성 ( 안쪽 여백 )	가로만 적용, 세로는 배경색만	모두 적용	모두 적용