<p>인라인 블럭은 넓이값도 가지고 있고 마진값도 있는데 왜 margin:auto가 적용이 안된건가요? 25분대 보면 hr.bar를 display:inline-block 바꿔주니깐 마진 오토가 적용이 안된게 잘 이해가 안가요.</p>

<p>margin:auto로 요소를 중앙에 보낼려면 margin:auto 속성을 가지는 요소가 꼭 블록요소여야만 합니다. 이건 이유가 없습니다. HTML 요소의 특징이 그렇습니다. 곧, hr.bar 곧 hr 태그는 블록요소이기 때문에 margin:auto를 주어서 중앙에 보낼 수 있는데, 이번 경우는 중앙이 아니라 왼쪽에 정렬을 하려고 하는 것이기 때문에 hr.bar를 display:inline-block 바꿔주었습니다.</p>
<p></p>
<p>코딩웍스 유튜브 영상을 보시면 이해가 훨씬 좋으실거에요.</p>
<h1 class="title style-scope ytd-video-primary-info-renderer" style="margin: 0px; padding: 0px; border: 0px; background: #f9f9f9; max-height: calc(2 * var(--yt-navbar-title-line-height, 2.4rem)); overflow: hidden; font-weight: 400; line-height: var(--yt-navbar-title-line-height, 2.4rem); color: var(--ytd-video-primary-info-renderer-title-color, var(--yt-spec-text-primary)); font-family: Roboto, Arial, sans-serif; font-size: var(--ytd-video-primary-info-renderer-title-font-size, var(--yt-navbar-title-font-size, inherit)); transform: var(--ytd-video-primary-info-renderer-title-transform, none); text-shadow: var(--ytd-video-primary-info-renderer-title-text-shadow, none);"><yt-formatted-string force-default-style="" class="style-scope ytd-video-primary-info-renderer" style="word-break: break-word;">display속성의 이해도 </yt-formatted-string><a href="https://youtu.be/AD-01QBrFGc" target="_blank" rel="noopener noreferrer">https://youtu.be/AD-01QBrFGc</a></h1>

인프런 커뮤니티 질문&답변

섹션 plan 01 질문입니다

display속성의 이해도 https://youtu.be/AD-01QBrFGc