block vs inline vs inline block

Title

Tags

Aliases

block vs inline vs inline blockblock vs inline vs inline-block블록 vs 인라인 vs 인라인 블록

Created

2 years ago

Updated

last year

	`block`	`inline-block`	`inline`
크기	부모 컨테이너의 너비를 채웁니다.	내용에 의존합니다.	내용에 의존합니다.
위치	새 줄에서 시작하고, 그 옆에 HTML 요소를 허용하지 않습니다.	다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다.	다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다.
`width`, `height` 지정 가능 여부	가능	가능	불가능. 설정되면 무시됩니다.
`vertical-align` 정렬 가능 여부	불가능	가능	가능
margin 과 padding	모든 방향에서 가능.	모든 방향에서 가능.	수평방향만 가능. 세로방향을 지정하면, 레이아웃에 영향을 주지 않습니다. `border`와 `padding`이 콘텐츠 주위에 시각적으로 나타나는 경우에도, 수직영역은 `line-height`에 의존합니다.
Float	-	-	수직 margin과 padding을 설정할 수 있는 `block` 요소와 같아집니다.