한눈에 보는 정의
요소의 테두리 안쪽에서 내용과 테두리 사이에 두는 여백.
이런 말로 들어요
- 버튼 패딩을 조금 키워서 누르기 쉽게 할게요.
- 카드 안 패딩이 좁아서 글자가 테두리에 붙어 보입니다.
그림으로 보기
패딩을 늘리면 글자 크기는 그대로인데 버튼이 커져 누르기 쉬워집니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
버튼 글자가 테두리에 딱 붙어 답답해 보이면 패딩을 늘립니다. 패딩은 요소 안쪽 공간이라 배경색이 그 영역까지 칠해지고, 버튼이라면 누를 수 있는 면적도 커집니다. 바깥쪽 여백인 마진과 헷갈리기 쉬운데, 패딩은 "안쪽", 마진은 "바깥쪽"으로 기억하면 됩니다.
실무 예시
예를 들어 상담 신청 버튼에 위아래 12px, 좌우 24px 패딩을 주면 글자 크기는 그대로인데 버튼이 커져 모바일에서 누르기 쉬워집니다.
함께 살펴볼 점
옷의 패딩(점퍼)과 검색어가 섞이므로 웹 맥락에서만 이 뜻입니다. 너비를 고정한 요소에 패딩을 더하면 전체 크기가 커질 수 있어 box-sizing 설정을 확인합니다.
AI에게 이렇게 요청해 보세요
상담 신청 버튼의 padding을 모바일에서 터치하기 편한 크기로 조정해 줘. 버튼 높이가 최소 44px 이상 되게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- padding | MDN 새 창
padding 속성이 요소의 네 방향 안쪽 여백 영역을 정한다는 설명을 확인했습니다.
자료 확인 - Introduction to the CSS box model | MDN 새 창
박스 모델이 내용·패딩·테두리·마진 영역으로 이루어진다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정