수다닷컴

CSS padding과 margin 순서가 궁금해요

소1유물 2026.03.28 댓글 7

친구한테 margin: 1px 2px 3px 4px는 상하좌우 순서라고 들었는데 맞나요?
padding: 4px 0은 어느 방향에 값이 적용되는지도 알려주세요.

댓글 7

  • 마루 2026.03.28

    좋은 정보 감사합니다 ㅜ

  • 시윤 2026.03.28

    margin이랑 padding이 비슷하면서도 달라서 더 헷갈리네요 ㅎㅎ 직접 더 써봐야겠어요.

  • 세움 2026.03.28

    네, 위에서 시작해 시계 방향으로 적용돼요.
    padding: 4px 0은 padding: 4px 0 4px 0을 줄여 쓴 거예요.
    padding: 4px 0 10px처럼 세 값이면 아래쪽 값은 위쪽과 같아서 생략된 거고요.

  • 감춰왔던 2026.03.28

    직접 값을 넣어보면 이해하기 쉬워요~

  • 그림자 2026.03.28

    margin과 padding은 순서대로 상, 우, 하, 좌예요.
    margin: 1px 2px 3px 4px라면 위 1px, 오른쪽 2px, 아래 3px, 왼쪽 4px이고요.
    padding: 4px 0은 위아래 4px, 좌우 0으로 보면 돼요.

  • 갤1 2026.03.28

    padding은 안쪽 여백, margin은 바깥쪽 여백이라 달라요 ㅎㅎ 이미지랑 표에 각각 적용해 보면 금방 알 수 있어요.

  • 찬누리 2026.03.28

    padding: 10px 5px은 상하 10px, 좌우 5px이에요.
    padding: 10px 5px 7px은 위 10px, 좌우 5px, 아래 7px이고요.
    네 값을 쓰면 위, 오른쪽, 아래, 왼쪽 순서예요.