[css] width와 height, margin과 padding, line-height

width와 height

width

(content의 가로 길이만을 의미, border나 padding 포함X)

auto : 브라우저가 계산하여 적용

length : 고정값으로 지정 (px, em ..)

percent : 부모 요소의 width에 상대적인 크기

height

(content의 가로 길이만을 의미, border나 padding 포함X)

auto : 브라우저가 계산하여 적용

length : 고정값으로 지정 (px, em ..)

percent : 부모 요소의 height에 상대적인 크기

(height에 percent 사용 시 부모 요소에 명확한 height가 명시되어 있지 않다면 적용X)

 

margin과 padding

margin

(사람 몸으로 친다면 뼈, 뼈대)

length : 고정값으로 지정 (px, em ..)

percent : 요소의 width에 상대적인 크기

auto : 브라우저에 따라 계산된 값이 적용

(대부분 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가짐)

 

margin 병합 (margin collapse) : 마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것

1. 두 요소가 상하로 인접 : 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합
2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
   1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합
   2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합
3. 내용이없는 빈 요소 : 해당 요소의 상단 마진과 하단 마진의 병합

padding

(사람 몸으로 친다면 살)

length : 고정값으로 지정 (px, em ..)

percent : 요소의 width에 상대적인 크기

padding에는 auto가 없음

 

line-height

line-height : 텍스트 라인의 높이를 의미하는 것

number : 부모 요소의 숫자 값이 그대로 상속 (실수를 많이 사용)
% : 부모 요소에서 계산된 px값이 적용