CSS패딩과 마진
2022. 6. 11.
HTML과 CSS를 작성하다 보면 요소 주변에 여분의 자리가 있음에도 다른 요소들과 일정 간격이 벌어진 것을 볼 수 있다. 이는 HTML의 블록요소로 인하여 생긴 공백일 수도 있고, 그렇지 않다면 CSS의 패딩과 마진이 바로 이 간격의 원인이다. 그럼 패딩과 마진은 무엇일까?? 우선 HTML과 CSS를 통해 작성된 요소의 구조는 제일 안쪽부터 콘텐츠 영역 > 패딩 영역 > 볼더 영역 > 마진 영역으로 이루어져 있으며 아래 사진과 같다. 즉, 패딩은 콘텐츠 영역과 볼더라인 사이에 있는 여백을 의미한다. 아래 작성한 두 문서를 비교해보면 쉽게 알수있다. 볼더 라인과 div내부 텍스트를 기준으로 사이에 간격이 벌어지는 것을 볼 수 있다. 내가 좋아하는 MDN사이트(https://developer.mozilla..
