margin
border를 경계로 바깥 쪽 여백
magin auto: 가운데를 기준으로 상하와 좌우를 같게 하는 것이다.
margin auto는 블록일 때는 위아래, 좌우에 적용되지만, 인라인 일때는 좌우에만 적용된다.
여백상쇄: 두 개 요소의 margin이 겹치면 둘 중 큰 값이 적용
padding
border를 경계로 안 쪽 여백
margin, padding의 적용 순서
1개 수치만 입력하면 전체, 2개는 위아래와 좌우, 4개는 위-오른쪽-아래-왼쪽 순서로 적용)
인라인 요소 vs 블록 요소
인라인:
<a>, <br> , <button> , <canvas> , <img>, <input>, <label>, <object>, <select>, <span>, <textarea> 등
태그에 할당된 공간만 차지하는 요소이다. (새로운 줄을 만들지 않는다.)
다른 인라인 요소는 포함할 수 있지만, 블록 요소는 포함할 수 없다. \
display 속성을 사용해 인라인을 블록 요소처럼 다룰 수 있다.
width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.
블록:
<address>, <article>, <div>, <h1~6>, <header>, <hr>, <li>, <nav>, <p>, <pre>, <section>, <table>, <ul> 등
전체 공간을 차지해 '블록'을 만든다. (언제나 새로운 줄을 만들고, 좌우로 최대한 늘어나 모든 너비를 차지한다. )
다른 블록 요소와 인라인 요소를 모두 포함할 수 있다.
HTML5 에서는 이전의 block 요소에 해당하는 요소들이 정확히 한 콘텐츠에 포함되지는 않는다. (사라진 개념?)
width, height, margin, padding 속성이 모두 반영된다.
display
display속성으로 인라인을 블록처럼, 블록을 인라인처럼 사용할 수 있다.
inline
앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.
width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.
block
앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.
width, height, margin, padding 속성이 모두 반영된다.
inline-block
inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,
block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.
