width, height:0 안될 때(feat. inline, inline-block)

• 우리는 공간 차지없이 요소를 없앨 때, 요소의 display를 none으로 지정하거나
• 요소의 너비와 높이를 0으로 지정하는 방법을 사용할 수 있다.
• 아래 예시는 display: none과 width&height: 0 적용한 모습이다.

See the Pen width, height vs display none by KumJungMin (@kumjungmin) on CodePen.

😃 그러면 <input>, <p>도 width, height:0을 이용해서 요소를 감출 수 있겠는걸?

• 아래 예시는 <input>, <p>에 width, height: 0을 지정한 모습이다.
• 예상과는 다르게, 약간의 공간을 차지하는 걸 볼 수 있다.

See the Pen input width, height 0 by KumJungMin (@kumjungmin) on CodePen.

🤔 왜 <input>, <p>에는 width, height:0을 해도 공간을 차지하는 걸까?

• 그 이유는 display 때문인데, display가 inline, inline-block의 경우, 요소에 기본적으로 여백이 존재한다.

	display: inline	display: inline-block
특징	줄바꿈 없이 한 줄에 다른 요소와 나란히 배치됨. width와 height적용 안됨. margin과 padding은 좌우 간격만 적용됨.	inline처럼 한 줄에 나란히 배치됨. inline과 달리 width, height, margin, padding 적용됨.
요소	<span>, <a>, <em> 등	<button>, <input>, <select> 등

😕 그럼, 공간 차지없이 <input>, <p>를 없애려면 display: none밖에 방법이 없나? 아니다!

• p태그와 같은 inline의 경우, 부모요소에 font-size: 0을 하면 없앨 수 있다.

See the Pen input, p에 여백 지우기 by KumJungMin (@kumjungmin) on CodePen.

• inline-block인 input태그는 display를 block 변경하고, width, height, border, padding을 0으로 해주면 된다.

See the Pen input 가리기 by KumJungMin (@kumjungmin) on CodePen.