margin과 padding

margin : 바깥여백 , padding : 안쪽여백

    - 값이 하나일 때 : 상, 하, 좌, 우에 각 값에 해당하는 바깥여백 적용

    - 값이 2개일 때 : (상,하), (좌,우)

    - 값이 3개일 때 : 위여백, 좌우여백, 아래여백

    - 값이 4개일 때 : 위, 오른쪽, 아래, 왼쪽 여백

 

 

margin겹침 현상

    - margin 값이 상하로 붙게 되면 큰값의 margin만 적용됨

 

 

padding(안쪽여백)과 border(테두리)를 적용하면 기존 블록요소의 크기에서 추가로 값이 설정됨 (설정한 가로, 세로보다 크기가 커짐)

-> box-sizing: border-box 를 적용하면 지정해놓은 가로, 세로 크기 내에서 padding과 border값이 설정됨 (크기변경X)

 

 

margin: 0 auto; -- 블록요소 자체를 가로축 가운데에 배치

text-align: center; -- 블록요소 내부의 요소들을 가운데 배치