부모 자식 자손 관계요소 개념이 어렵습니다..

동일한 질문 찾아보고 문의드립니다. (너무 기본개념을 이해하지 못해서 답답하네요..)

css 핵심이론(선택자, 선택자 적용 우선순위)강좌에서

<p>

<b></b>

</p>

b태그는 p태그의 하위요소로 b태그 적용하려면,

p b {} 

 ->이렇게 하위관계는 스페이스로 적는다고 들었습니다.

부모 자식 관계로 생각하면, 스페이스는 자손관계/꺽쇠는 자식관계와 대입하니 헷갈리네요..

p b {} 자손관계로 이해해도 되는 건지요

---------------------------------------------------------------------------

css 자손선택자 vs 자식선택자, 부모요소 vs 자식요소 강의에서,

<div class="box">

<div>     ----->ㄱ

<div></div>    --------->ㄴ

</div>

->html의 계층구조는 이해했는데요.

박스 입장에서 자손은 2개로 말씀해주셨는데요. 그러면 box의 자식요소도 ㄱ 이고 box의 자손요소에도 ㄱ이 포함된다고 봐야 할까요?

.box div {} ->스페이스로 자손관계이니 자손관계가 2개포함이라면 ㄱ,ㄴ 적용은 이해가는데요.

.box > div div {}  ->div 밑에 div를 말하는 건 알겠는데요. div div 사이에 스페이스라서 자손관계이지않나 헷갈립니다.

제가 혹시 태그의 상하(부모자식) 관계 표시와 클래스 상하관계 표시를 혼동하는 걸까요?

-------------------------------------------------------------------------------------------

두 개의 div가 동일한 패딩값에도 서로 위치가 차이나는 것이 이해되지 않아 숫자를 넣어보았는데요.

저는 동일한 위치와 값의 div라고 생각했는데요. 이렇게 div가 위 아래로 다른 건지 모르겠습니다.