The natural or intrinsic size of things

HTML 엘리먼트는 CSS 영향을 받기 전에 기본적으로 natural size를 갖는다.
이미지 엘리먼트를 예로 들 수 있다.
이미지 크기는 이미지 자체 파일에 의해 결정되는 것이지 따로 적용되는 형식에 의해 결정되는 것이 아니다.

이미지는 자신만의 크기를 가지지만, 빈 <div> 는 크기가 없다.
contents가 없는 <div> 에 테두리를 설정하면 페이지에 가로 줄이 표시된다.
<div> 엘리먼트의 접힌 테두리이다.
만약 비어있는 <div> 엘리먼트 안에 텍스트를 넣으면 텍스트 크기만큼 block-size 가 늘어날 것이다.
이러한 size를 natural or intrinsic ( 본질적인 ) size라 한다.

Setting a specific size

물론 엘리먼트에 CSS로 특정한 크기를 부여할 수 있다.
이러한 size를 extrinsic size라 한다.

Using percentages

백분율을 사용할 때는 백분율이 무엇을 기준으로 얼마로 계산되는지 알아야 한다.
width 를 백분율로 지정하면 width 프로퍼티가 없을 때 일반적으로 차지할 수 있는 공간을 대상으로 백분율이 적용된다.
만약 자식 엘리먼트에 너비 지정을 따로 하지 않으면 자식 엘리먼트는 블록 레벨 엘리먼트이기 때문에 사용 가능한 공간의 100%를 차지할 것이다.

Percentage margins and padding

margin 과 padding 프로퍼티를 백분율로 설정하면 동작이 이상하게 나타나는걸 확인할 수 있다.
예를 들어, 위아래 margin의 백분율은 부모 엘리먼트의 높이의 백분율이고 좌우 margin의 백분율은 부모 엘리먼트의 너비의 백분율이라고 예상할 수 있다.
하지만 그렇지 않다.

자식 엘리먼트의 margin 및 padding에 백분율을 적용할 경우 부모 엘리먼트의 inline-size 를 기준으로 계산된다.

min- and max- sizes

다양한 양의 콘텐츠를 포함할 수 있는 박스가 있고 박스의 높이가 항상 일정 크기 이상이어야 할 경우 박스에 min-height 프로퍼티를 설정할 수 있다.
박스의 높이는 항상 이 높이 이상이지만 최소 높이에 대한 공간보다 많은 콘텐츠가 있는 경우 크기가 커진다.
이는 오버플로를 방지하면서 다양한 양의 콘텐츠를 처리하는데 매우 유용하다.

최대 너비도 max-width 프로퍼티로 적용할 수 있다.
최대 너비를 사용하는 일반적인 경우로는, 이미지를 intrinsic width로 표시할 공간이 부족한 경우 이미지가 해당 박스보다 커지지 않도록 축소하기 위해 사용하는 것이다.
또한, 이미지의 intrinsic width가 컨테이너 보다 작을 경우, 이미지에 width 를 100%로 설정하면 이미지가 강제로 늘어나 픽셀화된 것처럼 보이게 되지만 max-width 를 100%로 설정하면 이미지가 강제로 늘어나지 않으므로 픽셀화가 방지된다.

그렇다고 이 프로퍼티만을 믿고 크기가 큰 이미지를 로드한 다음 브라우저에서 축소하도록 개발하면 안된다.
이미지 크기는 설계에 표시되는 이미지의 크기보다 크지않도록 적적하게 조정해야 한다.
지나치게 큰 이미지를 다운로드하면 사이트 속도가 느려진다.

[참고] : MDN