width, height, block, inline
inline
- 글자를 만들기 위한 요소들
- 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌍힘
포함한 콘텐츠 크기만큼 높이 / 너비가 자동으로 줄어듦
- margin / padding 의 경우, margin top / bottom만 사용 불가능
- 인라인요소는 글자를 취급하는 요소이기 때문에 가로, 세로 사이즈 지정할 수 없음
block
- 상자를 만들기 위한 요소들
- 가로너비는 부모요소의 크기만큼 자동으로 늘어남, 세로너비는 포함한 콘텐츠 크기만큼 자동으로 줄어듦
- 위,아래 / 좌우 여백(margin / padding)모구 가능
- 가로세로값 지정 가능
inline-block
- 인라인 요소이면서 블록요소가 가지고 있는 몇가지 특성 사용 가능
width, height
- 기본값은 auto(브라우저가 알아서 너비를 계산)
- inline의 경우 width / height가 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
- block의 경우 width가 부모요소의 크기만큼 자동으로 늘어나고 height의 경우 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
Code log