인라인 요소의 두 종류 - 대체 인라인, 비대체 인라인

1. 인라인 요소의 두 종류

✅ 대체 인라인 요소 (Replaced Inline Elements)

• 의미: 내부 콘텐츠가 브라우저가 직접 렌더링하지 않고 외부에서 불러와 대체되는 요소예요.
• 예시:
  • <img> : 이미지를 불러옴
  • <video>, <audio> : 영상·음성을 불러옴
  • <iframe> : 다른 문서를 불러옴
  • <input> : 브라우저가 렌더링하는 입력창

👉 이 요소들은 "내용이 외부에 의해 대체"되기 때문에 width, height 같은 수직·수평 크기 속성 적용 가능해요.
예를 들어 <img>는 width: 100px; height: 200px; 적용이 됩니다.

---

✅ 비대체 인라인 요소 (Non-replaced Inline Elements)

• 의미: 요소 안의 텍스트를 브라우저가 직접 렌더링하는 요소.
• 예시:
  • <span>
  • <a>
  • <em>, <strong>
  • <label> 등

👉 이들은 기본적으로 줄(line) 안에 텍스트처럼 배치돼요.
그래서 width, height, margin-top, margin-bottom 같은 수직 크기 관련 속성은 적용되지 않음(혹은 무시됨).
하지만 line-height, padding-top/bottom은 적용 가능해서 글씨 위아래 공간은 줄 수 있어요.

---

2. 정리

 

구분	예시	width/height 적용	margin-top/bottom 적용
대체 인라인 요소	<img>, <input>, <video>	✅ 가능	✅ 가능
비대체 인라인 요소	<span>, <a>, <em>	❌ 불가능	❌ (사실상 무시됨)