[CSS] - 자기 만족 정리

margin : 0 auto; 는 대표적인 중알 정렬 속성 

 

1. margin : 0 auto

0 값은 위 아래 여백을 주지 않는다 의미. auto는 좌우 여백을 균등하게 배분 처리 하겠다는 의미

 

2. margin auto 안되는 상황

margin: auto 는 inline 속성에는 적용 되지 않음. inline 속성은 자기 자신 만큼의 영역값 (width, height) 을 지니고 있기 때문임

 

• inline 속성이 아닌 block 속성으로 태그 변경
• span 대신 div 태그 사용
• 요소의 display 속성을 block 으로 변경

 

---

 

Block vs Inline

• 대부분 HTML element 는 block 요소
• header, footer, p, li, table, div, h1 등 모두 block 요소에 해당
• block 요소 의미는 해당 요소 옆(좌우)에 다른 요소를 붙일 수 없다라는 의미
• block 요소와 성질이 반대인 inline 도 존재
• inline 요소는 요소끼리 서로 한줄, 바로 옆에 위치 할 수 있음
• inline-block 은 하이브리드 모드라고 생각하면 됨. 기본적으로 inline 처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치가 가능하지만 block 처럼 width , heigth 속성 지정 및 margin , padding 속성의 상하 간격 지정이 가능함