a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

Question

30분 30초 패딩 넣었는데 a태그의 클릭가능한 범위가 늘어나나요? 줄어들어야 하는것아닌가요 크기를 키우려면 마진을 넣어야하는 것으로 알고있는데요 ㅠ.ㅠ 또한 강의에서 그 직후에 border를 표시해서 z태그들의 영역이 겹치는것을 말씀하시면서, 그 이유가 인라인 요소이기 때문이라고 말씀하셨는데요, 인라인 요소에 대해 제가 알고있는 것은, 블록요소와 다르게오른쪽으로(?) 쌓일 수 있다는 것만 알고있는데, 이것과 인라인요소가 겹치는 이유가 관련이 있는지, 아니면 제가 모르는 다른 무언가때문인지 어쨌든 인라인요소이기 때문에 겹친다 라는 표현이 이해가 안가네요. 감사합니다.

노원두 · Answer

안녕하세요! 트랙 님! 꼼꼼히 공부하시는 모습 정말 보기 좋아요! 개발자가 되려면 계속 why에 대한 궁금증을 해결하며 학습해야 합니다^^ * 아래 태그로 만든 inline 요소 를 준비했습니다! 이를 활용하여 3가지 궁금증을 해결해봐요! 클릭 영역을 키우려면? margin vs padding 아래 그림에서 클릭 가능한 부분은 어디일까요? 바로, 하늘색 영역 모두 입니다! (클릭하세요를 기준으로 padding이 20px 적용되어있어요!) 다음으로, 아래 그림에서 흰색 배경은 클릭이 될 수 있을까요?! 사실 이 흰 배경은 margin이 적용된 부분이랍니다! (만약 클릭이 된다면, 어디가 의 흰 배경 이고 어디가 의 클릭 가능한 margin 영역의 흰부분 인지 굉장히 헷갈리겠죠?!) 정리하면, 클릭 가능한 영역은 내부 영역의 사이즈를 뜻하므로, padding은 클릭 영역을 넓혀 줄 수 있어요! 반면, margin은 바깥 영역이므로 클릭 가능 영역에 해당하지 않는답니다!^^ inline 요소인데 왜 아래로 내려가있나? inline 요소는 아래로 내려가지 않고, 오른쪽으로 붙는게 정상입니다! 다만, 오른쪽으로 붙을 공간이 없으면...? 그땐 내려가게 되겠죠?! 따라서, 메뉴박스 안에서 더이상 오른쪽으로 붙을 수 없는 경우 아래로 내려간답니다! (또는, 부모가 flex등을 사용하여 자식을 세로로 배치할 수도 있어요! 비록 자식이 inline이더라도요!) 내려가는거랑 겹치는거랑 뭔 상관인가? inline 요소의 경우, 일반적으로 높이가 따로 없으며 알맹이(텍스트) 높이를 기준 으로 삼습니다. 따라서, block요소 처럼 예쁘게 내려가지 않고, inline요소는 알맹이가 겹치지 않는 정도로만 내려가 게 되므로, 알맹이를 제외한 padding 영역 등 외부영역은 겹쳐 지게 된답니다!^^

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김트랙님.

a 태그에 패딩을 추가했을 때, 클릭 가능한 범위가 늘어나는 이유에 대해 알아보겠습니다.

패딩과 박스 모델

패딩(Padding): CSS에서 패딩은 요소의 콘텐츠와 경계(border) 사이에 추가적인 공간을 제공합니다. 따라서 패딩을 추가하면 요소의 전체 크기가 늘어납니다. 이는 a 태그와 같은 인라인 요소도 예외는 아닙니다.
마진(Margin): 마진은 요소의 경계 외부에 추가되는 공간으로, 다른 요소와의 간격을 조절하는 역할을 합니다. 따라서, 마진을 추가한다고 해서 요소 자체의 크기가 늘어나는 것은 아닙니다.

따라서, a 태그의 클릭 가능한 범위를 늘리기 위해서는 패딩을 사용하는 것이 올바른 방법입니다. 이로 인해 요소의 크기가 커져서 더 큰 영역에서 클릭이 가능해집니다.

참고 링크

유사한 주제를 다룬 기존의 질문이 있습니다. HTML/CSS 박스 모델과 패딩의 작동방식 을 참고하시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자, 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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