Display - Block

Display란, box type을 결정짓는 css 속성.

모든 html요소들은 box로 표현되고, 다 display값을 갖는다.

display 값 중 block의 속성을 알아보자!

block : 길막, 차단한다는 의미를 갖고 가면 이해하기 편리할것

block은 width, height, padding, border, margin같은 속성들 다 가질수있다
block type의 width를 따로 선언하지 않은경우, 기본으로 block의 속성에서 width는 부모 content-box의 100%를 차지하게 된다.
만약 따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채워버린다!
따라서 다른 요소들이 남은 공간을 차지하지 못하는것.
(궁금한점. 만약 부모요소의 width보다 더 큰 값을 선언한다면 어떻게 되나??)
margin: 0 auto; -> (속기형 표기) top/bottom은 0픽셀로 주고 left/right는 auto먹여서 가운데 배치하는것
margin-left: auto; -> 사실상 오른쪽으로 block을 옮겨준건 아니고, margin을 왼쪽에 몰빵한것

별도의 height값을 블록에 주지 않으면, 자식 요소가 갖는 height의 합이 부모의 height값이 된다.
자식 block들의 height값이 140px, 140px이면 부모의 height = 280px
만약 margin-bottom을 자식블록이 갖는다면 그것도 합산하면 됨