Inflearn Community Q&A

선생님 질문이 있습니다!

블록 요소랑 인라인 요소를 배치하면서 연습하고 있는데요
블록 요소 안쪽에 인라인 요소를 배치하면
첨부 이미지 아래쪽 녹색 부분에 약간 공백같은게 생기는데
이유를 모르겠어요.

패딩이랑 마진을 0씩 줘도 없어지지가 않는데
혹시 패딩 마진 이외에 나중에 배우는 내용이면
나중에 배운다고만 알려주시면 감사하겠습니다!

 

 

- HTML 소스 -

<div class="parent">
    <div class="child"></div>
</div>

 

- CSS 소스 -

.parent {
    border: 1px solid black;
    text-align: center;
}

.child {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: inline-block;
}