19. How CSS Renders a Website: The Visual Formatting Model

 

 

 

 

 

 

 

 

 

 

 

inline의 경우

첫째, 높이와 너비 속성은 적용되지 않아요

즉 이 속성을 사용할 수 없다는 거죠

둘째, 인라인 요소로 수평 패딩과

여백만 지정할 수 있어요

 

inline-block의 경우

인라인 블록 요소는 블록과 인라인의 조합입니다. 이러한 요소(예: 블록)에 높이, 너비, 전체 패딩을 설정할 수 있습니다. 이러한 요소는 기본적으로 다른 요소가 새 줄에서 줄 바꿈되지 않는다는 점에서 인라인 요소처럼 작동합니다. 이러한 요소는 요소가 서로 옆에 배치되기를 원하지만 요소가 표시되는 방식(전체 패딩/너비/높이)에 대한 원격 제어를 원할 때 유용합니다. 

 

 

Now, a common misconception is that only the z index

property creates new stacking contexts,

but that's not the case.

An opacity value different from one,

a transform, a filter or other properties,

will also create new stacking contexts.

 

---

 

** block, inline-block, inline 차이 정리하기 **

 ** float 속성 알아보기 **