CSS box model - 패딩(padding), 마진(margin)

padding과 margin은 축약형 사용 가능

값은 top부터 시계방향으로 right bottom left 순으로

padding:10px 10p; 으로 작성시

상하와 좌우 값은 같은 것으로 판단하여

padding:10px 10px 10px 10px; 과 같아짐

 

margin:auto;

-> 가로축 중앙 정렬에 사용되며 width 값이 필요하다

 

margin collapse

-> 아래의 top과 위의bottom margin 값이 겹치게 되면 더 큰 값이 적용된다

 

음수, auto

-> margin은 음수 사용가능 padding은 불가

 

margin padding모두

%사용 시 가로축 기준으로 크기를 잡는다

-> top bottom의 경우에도 가로축을 기준으로 잡기 때문에 주의해야함

margin이 -일 경우 화면 밖에 존재함 or scroll생김

 

 

width를 설정하지 않았을 경우 default 는 auto

px과 %를 사용 가능하다

width 값은 box에 선언하는 것이 아니라

content영역에 선언되는 것이다

-> box의 전체size는 border 내부 전체 영역을 말하는 것

-> width + padding + border의 값이 된다

-> 자식 요소에 %로 사용시 부모 영역을 기준으로 %가 적용된다

 

height 역시 default는 auto

-> 브라우저가 content의 길이를 자동으로 계산하여 늘였다 줄였다함

-> box size는 역시 height + padding + border의 값이 된다

-> %적용시 contaning block의 %를 높이 값으로 정의한다 ( 부모 box영역 높이의 %를 기준으로 ?)