CSS에서 replaced elements는 representation(표현? 화면상에 보여짐? 여튼 그런 뉘앙스)이 CSS의 scope 밖에 있는 엘리먼트이다.
이 들은 CSS 포맷 모델과는 독립적인 외부 객체이다.
쉽게 말해 content가 현재 문서의 스타일에 영향을 받지않는 엘리먼트이다.
엘리먼트의 위치는 CSS의 영향을 받지만, 엘리먼트의 content는 영향을 받지 않는다.

<iframe> 와 같이 일부 replaced 엘리먼트에는 고유한 스타일시트가 있을 수 있지만, 이것 역시 상위 문서의 스타일을 상속하지 않고 독립적으로 동작한다.

replaced 엘리먼트의 content에 미칠수 있는 유일한 영향은 content의 위치를 제어하는 것이다.

Controlling object position within the content box

특정 CSS 프로퍼티를 사용하여 replaced 엘리먼트 내에 포함된 객체를 엘리먼트의 박스 영역 내에 배치하는 방법을 지정할 수 있다.

• object-fit
  
  

• object-position
  
  
  
  

Replaced elements

전형적인 replaced 엘리먼트

• <iframe>

• <video>

• <embed>

• <img>

특수상황에서만 replaced 엘리먼트가 되는 엘리먼트

• <option>

• <audio>

• <canvas>

• <object>

• <applet>

또한 type이 "image" 인 <input> 엘리먼트는 <img> 와 유사한 replaced 엘리먼트라고 보기때문에 HTML 명세에서는 이 또한 replaced 엘리먼트라고 정의한다.

다만, type이 "image"가 아닌 <input> 엘리먼트를 포함한 다른 폼 엘리먼트들은 명백하게 replaced 엘리먼트가 아니다.
(명세에서는 이것들을 "위젯"이라고 설명한다)

하나 더, CSS의 content 프로퍼티를 사용하여 삽입된 객체는 익명 replaced element로 정의된다.

버그? 의도?

보통 이미지를 넣기 위해서는 다음과 같이 구현한다.

<div class="container">
  <img src="..." alt="steak" />
</div>

.container {
  width: 20rem;
  background: gold;
}
img{
  max-width: 100%;

결과를 예측해보자.

컨테이너의 너비가 20rem으로 고정되어 있고 그 안의 img 엘리먼트가 max-width: 100% 이기 때문에 너비가 20rem만큼 크기가 변경될 것이다.

이미지의 높이와 너비는 원본의 비율을 따를 것이기 때문에 너비가 20rem으로 고정이니 높이가 비율대로 자동으로 정해질 것이다.

정해진 img 엘리먼트의 높이만큼 컨테이너의 높이가 설정될 것이고 컨테이너의 background:gold 는 의미가 없는 코드일 것이다.

...라고 추측할 수 있다.

결과를 보자.

컨테이너 엘리먼트와 img 엘리먼트의 높이가 다르게 나온다.

따라서 (컨테이너 높이 - img 엘리먼트 높이) 만큼 배경색(골드)가 나타난다.

아마 margin , padding , border 문제거나 box-sizing:border-box 문제가 아닐까 생각할 것이다.

이는 틀렸다.

정답은 line-height 프로퍼티 때문이다.

이유는 모르겠다.

엘리먼트 내부에 replaced element가 포함될 때 line-height 가 적용이 되어서 높이가 서로 맞지 않는다.

이 현상을 피하기 위한 두 가지 방법을 알아냈다.

• replaced element에 line-height: 0 를 적용한다.

• 컨테이너의 너비와 높이 모두 명시적으로 설정한다.
  위의 경우엔 너비만 설정한 것을 확인할 수 있다.

[참고] : MDN