margin(외부 여백)

margin

margin : 요소의 외부 여백(공간)을 지정하는 단축 속성 

• 음수 사용가능 

- init (기본 값):   0 

auto: 브라우저가 여백을 => 계산 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용

단위 px em vw 등 단위로 지정 

% 부모 요소의 가로 너비에 대한 비율로 지정 (극히 드물게 사용)

 

단축속성 

 

margin : top right bottom left (시계방향)

• margin- top , margin-right, margin-bottom, margin-left의 개별속성을 합친 게 단축속성이다
• 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 

margin : 10px

-모든 방향으로 외부 여백 10px

 

margin: 10px 20px

- 상하 10px 좌우 20px

 

margin: 10px 20px 30px 

-상 10px 좌우 20px 하 30px

 

margin: 10px 20px 30px 40px

-상 10px  우  20px  하  30px  좌 40px

 

코드펜 예제 

See the Pen margin by 김선미 (@tjsalsun) on CodePen.

주석 첫 번째 /*   margin: 10px; */ 풀경우 상하좌우 10px 외부 여백 

주석 두번째 풀 경우 (첫번째 주석을 푼걸 다시 주석걸어주세요) /*   margin: -20px 10px; */ item들이 겹쳐진다 외부의 여백이 쪼그라 든다!!

---

TIL

key point 

margin  auto 설정시 가운데 정렬에 이용되낟 
 
느낀점

box-sizing일 때 어떻게 적용되는지 알아보기 

오늘의 학습 만족도 
⭐⭐⭐⭐⭐