display (CSS)

display : block; (길막)
width,height,padding,margin 전부 사용가능.

 width 값을 주지 않았을 경우 :  부모의 content-box 100% 따라간다
 width 값을 주었을 경우 : 빈공간 만큼 margin 으로 채운다. (옆에 아무도 못오게)

margin-left : auto  마진을 왼쪽에 몰빵하겠다.
margin-right : auto 마진을 오른쪽에 몰빵하겠다.
두개 다 쓰면 자동으로 중앙정렬 --> margin : 0 auto

height 값을 주지 않았을 경우 : 자식 요소의 합 height = 부모의 height

 

---

display : inline 
left, right 사용 가능.

inline 이 안되는 요소들

 인라인 요소 들은 좌에서 우로 줄간격에 맞춰서 흐르는 게 가장 우선이기 때문에
 그 흐름을 방해하는 width, height, padding-top/bottom, margin-top/bottom 같은 친구들은 다 무시하는 것

 

 

---

display : inline-block

inline 에 block 의 능력을 탑재

 

참고

edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4