inline요소&block요소 // margin : 0 auto

[ margin : 0 auto  Not Working ]

1. float를 썼을 때

2. width 값을 지정하지 않았을 때

3. inline 요소일 때 

4. display : inline-block  => 요소가 inline 성질을 갖게 되어 => margin:auto 대신 text-align:center

[ inline요소 block 요소 ]

	inline	block	inline-block
영역	컨텐츠 크기 (line-height로 세로 크기만 조절 가능)	지정값 (width, height) 지정 안 할 시 - 너비는 부모의 가로 크기, 세로는 컨텐츠 크기	block과 동일
정렬	텍스트정렬(text-align..)	마진(auto) padding table - vertical align	inline과 동일(text-align)
박스모델	margin - left, right ( top, bottom X ) padding border float	margin (width값 고정 시 auto 사용 가능) padding border float	margin(auto 불가) padding border float
중첩요소	inline만 가능	block, inline 모두 가능	inline만 가능
특징	position이 text와 유사하게 처리됨 (vertical-align 영향)	양 옆에 요소 둘 수 없음	inline과 동일
대표 요소			img input
문제점	1) ㅁㅁㅁ인라인 사이에 공백이 있을 경우:    줄바꿈도 텍스트로 인식하기 때문에    </span><span> 이런식으로 다 붙이면    인라인 사이에 공백이 없어짐 2) inline요소의 크기는 컨텐츠만큼이기    때문에 width, height이 적용 안 됨    => line-height로 줄의 높낮이만을       설정 할 수 있음. 3) a태그는 html5부터는 블록태그를     감쌀 수 있다!	1) 블록>블록인 경우:       p, h1~6 안에는 블록요소 중첩 X 2) ul, dl 중첩 X       =>li,dt,dd에서 중첩 가능	1) 강제로 display를 바꾼 경우 :    그 속성은 원래 속성을 상정한 후,     위의 규칙을 따름! (ex) div가 inline요소가 되더라도        a>div는 안됨! -> validator 통과가 안 됨, 유효성검사기는 display를 체크하지 않기 때문에 브라 우저에 따라 깨질 수 있음