[ CSS ] CSS padding 과 margin 적는 순서 + 차이

[ CSS ] CSS padding과 margin 적는 순서 + 차이점

 

 

 

padding 과 margin 은 적는 순서가 동일하다. 

 

 

 

첫번째 하나씩 적기.

 

<padding 적는 방법 1 >

위 : padding-top: 값 ;

아래 : padding-bottom : 값 ;

왼쪽 : padding-left : 값 ;

오른쪽 : padding-right : 값 ;

 

 

<margin 적는 방법 1 >

위 : margin-top: 값;

아래 : margin-bottom : 값 ;

왼쪽 : margin-left : 값 ;

오른쪽 : margin-right : 값 ;

 

 

하나씩 적는 방법은 굉장히 쉽다. 

한글을 영단어로 바꾸면 된다.

 

 

어느 한 부분에만 값을 줘야하는 경우에 사용하기 좋다.

 

 

padding 과 margin의 적는 순서를 비교해보면,

동일한 걸 볼 수 있다.

 

 

 

 

두번째 위=아래=왼쪽=오른쪽 값이 같을 경우 값 하나만 적어주기

 

 

 

 

<padding 적는 방법 2>

padding : 값 ;

 

 

<margin 적는 방법 2>

margin : 값 ;

 

 

네군데 모두 값이 동일하기 때문에 하나의 값만 적어주면 된다.

 

 

 

 

 

세번째 위=아래 값이 동일하고, 좌=우 값이 동일한 경우 같이 적기

 

 

padding : 값(위아래) 값(좌우) ;

maring : 값(위아래) 값(좌우);

 

 

이제 여기서 많이들 외울 때 헷갈려 한다. 

 

 

하나씩 쓸때는 괜찮았는데 값을 한꺼번에 쓰려고하면 헷갈려한다. 

 

 

그래서 나는 값을 줄때 위가 가장 먼저 나오기 때문에

패위(padding : 위) 마위(margin : 위)로 외웠다.

 

 

별거 아닌거 같지만 이렇게 외워두면 신기하게도 

코드 작성할 때 기억에 뽝 남아서 바로 적용이 가능하다. 

 

 

기억하자. 패위 마위.

 

 

네번째 좌우 값이 같을 경우 

 

 

 

<좌우 값이 같을 경우>

padding : 값(위) 값(좌우) 값(아래) ;

margin : 값(위) 값(좌우) 값(아래) ;

 

 

위 값을 가장 먼저 적고 

좌우값은 동일하기 때문에 합쳐서 적어주고

아래 값을 마지막에 적어준다. 

 

 

마찬가지로 padding 과 margin 은 적는 순서가 동일하다. 

 

 

 

 

다섯번째

값이 전부 다른 값을 한번에 적는 방법

 

 

 

<한번에 적는 방법 >

padding : 값(위) 값(오른쪽) 값(아래) 값(왼쪽) ;

margin : 값(위) 값(오른쪽) 값(아래) 값(왼쪽) ;

 

 

 

이것도 어려울 게 하나도 없는데 처음 익힐 때 순서가 많이 헷갈려서

편집기에 작성하려고 할때 많이 찾아보는 부분 중 하나다. 

 

 

한번에 적는 방법은 패위 마위 + 시계방향만 기억하면 된다.

 

 

위쪽 순서가 가장 먼저 시작되고 시계방향으로 돌아간다고 생각하면 기억하기 쉽다.

 

 

위 -> 오른쪽 -> 아래 -> 왼쪽. 

 

 

 

암기 끝 ^^

 

 

 

 

padding 이란 ? margin 이란 ?

 

 

 

 

padding은 안쪽 여백은 말한다.

 

 

margin은 바깥쪽 여백을 말한다. 

 

 

 

 

 

 

글자나 이미지를 넣은 후

안쪽에 여백을 주고 싶으면 padding 값을 주면 된다. 

또 바깥쪽에 여백을 주고 싶다면 margin 값을 주면 된다. 

 

 

그사이에 border를 넣게 되면 위와 같은 이미지나 나타난다. 

 

동일한 px값을 줄 경우에 위 이미지와 같이 안쪽에서부터

text or image -> padding -> border -> margin 순서로 적용된다는 걸 기억하자. 

 

 

 

적용한 값이 제대로 들어갔는지 확인하고 싶다면 

마우스 우버튼 > 검사 를 눌러서 확인해보자.