20220921 block / inline-block / inline 차이점

See the Pen block / inline-block / inline by rimrim (@s2hl) on CodePen.

 

block	inline-block	inline
<div>,<p>,<h1>등	<button>, <input>, <select>등	<span>, <a>, <em> 등
무조건 한줄을 점유	크기만큼만 공간을 점유	text 크기만큼만 공간을 점유
다음 태그는 무조건 줄바꿈이 적용	줄바꿈을 하지 않고, 동일한 라인에 작성가능	줄바꿈을 하지 않고, 동일한 라인에 작성가능
width, height, margin, padding 속성이 모두 반영	width, height, margin, padding 속성이 모두 반영	margin과 padding 속성은 좌우 간격만 반영 / 상하 간격은 반영X
	내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따름	width/height 적용불가

 

 

 

참고

https://dev.to/shimphillip/inline-vs-inline-block-vs-block-280h