[CSS] margin , padding 그리고 box-sizing

margin

요소의 외부 여백을 지정하는 속성

margin : 1px 2px 3px 0;
/* top right bottom left 위에서부터 시계방향으로 4가지입력, 
입력값이 없을시 별도로 단위를 입력하지 않는다.*/

/*모두 같을때*/
margin : 5px;
/* 위 5px , 좌우 10px, 아래 0*/
margin : 5px 10px 0; 
/*위 아래 5px 좌우 10px*/
margin 5px 10px;

• top, bottom , right, left가 있으며
• (형제 태그의 경우) 형제 태그의 top, bottom margin은 겹친다(더 큰쪽에게 먹힌다)
• ※ 단 ! right , left 의 margin은 겹치지 않는다.
• (빈 블록의 경우) 빈 블록(높이가 없는경우) 에는 margin이 있음에도 불구하고 서로를 지나가서 영역을 침범한다.
• (부모안에 자식이 있는경우 )첫번째 자식이 margin-top 이 있거나 ,
  마지막 자식이 margin-bottom 이 있는경우 부모의 영역을 뚫고 margin이 나온다.
• 위의 해결방안은 부모를 blcok format context 로 만들어준다. (float나 overflow , position : absolute를 사용하는 방법이 있다.)
• ※ display: inline-block 과 width: 100%을 사용하면 위의 3가지 경우를 대부분 해결이 가능하다.
• margin: 0 auto; 부모에 맞춰 정렬

자식에게는 가능한 margin을 주지 않는것도 고려를 해봐야겠다..

padding

margin과 비슷하며 , 요소의 내부 여백을 지정하는 속성

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

 

 

 

1. 첫번째 div는 아무 옵션이 없는 div 태그입니다.

 

2. 테스트 1은 1번과 동일한 div 태그에 margin을 10 준 상태입니다.
     margin : 10px 라는 옵션이기 때문에 4방향 전부 margin이 들어갑니다.

 

 

3. 3번은 padding : 10px를 준 상태이며, 요소 내부에 여백이 들어간걸 볼 수 있습니다.

box-sizing

요소의 크기 계산 기준을 지정합니다.

1. content-box (기본값) : 요소의 내용(content)으로 크기 계산

2. border-box  : 요소의 내용(content) + padding + border로 크기 계산

 

See the Pen box-sizing by J-Plum (@J-Plum) on CodePen.

 

 

1. 첫번째 div의 경우
기본 요소 100*100px , padding 20 +20 (좌 우) border 2 +2 해서 144*144px 라는 크기가 나왔습니다.

하지만 2번째 div처럼 가로 세로를 100px로 하고싶습니다.

 

2. 3번째 div처럼  padding과 border을 빼준값인 56px로 가로 세로를 지정해서 바꿔줘야할까요..?

 

4. box-sizing을 border-box로 사용하면됩니다. 
   4번째 div를 보면, 가로 세로를 별도로 지정하지 않아도 3번 div와 같은걸 볼 수 있습니다.

 

즉 border-box는 요소의 크기 계산 자체를 content + padding + border 이 width * height가 되도록 해줍니다

그래서 content + 40 + 4 =100 이니  content가 자동으로 56이 되었습니다.