box-sizing, vertical-align

div 에 padding 을 주면 총 사이즈가 커져, main 박스에 밀리거나 하는 현상을 막아줌

 (main width : 300px;

/ div1 width : 150px;

/ div2 width : 150px; border : solid 1px black;

  main 길이를 넘어서기에 모양이 망가지지만, box-sizing을 사용하면 border가 안쪽으로 들어와서 겉 모양이 유지된다.)

 

 

box-sizing : content-box; width : 100%;

 

box-sizing : content-box; width : 100%; border : solid #5B6DCD 10px; padding : 5px;

 

box-sizing : border-box; width : 100%; border : solid #5B6DCD 10px; padding : 5px;

 

 

Vertical-align

 인라인 블록 등, 모든 인라인 요소의 수직 정렬을 위해 사용.

 블록 레벨요소의 수직 정령에서는 영향이 없음.

 

속성값 baseline, sub, super, top, text-top, middle, bottom, text-bottom, <percentage>, <length>, inherit

 

속성값설명예시

Baseline (line-height가 지정된 대체되지 않은 요소)	요소의 인라인박스의 baseline을, 라인박스의 baseline에 정렬​ 대체된요소의 baseline은 각 UA에 따라 다르게 계산됨으로 수직 정렬 시 baseline값을 가급적 사용하지 않고 그 외의 값을 사용 인라인블록에 여러줄의 텍스트가 있는 경우에는 마지막 라인박스, 즉 마지막 줄의 baseline을 해당 요소의 baseline으로 봄
Baseline (텍스트가 없는 인라인 블록 요소)	텍스트가 없거나, 텍스트가 있지만 overflow 속성 값이 visible인 인라인블록 요소의 경우 마진 박스의 하단 경계를 baseline으로 봄​
Middle	요소의 인라인박스의 수직 중앙 지점(콘텐츠 영역의 높이/2)을, 부모요소의 중앙 지점에 정렬 부모요소의 중앙지점은 strut의 baseline 위 0.5ex 지점 ex의 높이는 일반적으로 ‘x’자의 높이를 의미하며 글꼴, 사용자 에이전트에 따라 0.5ex로 정의되는 위치에 차이가 있을 수 있음
Text-top	요소의 인라인박스의 상단을, 부모요소 콘텐츠영역의 상단에 정렬​
Text-bottom	요소의 인라인박스의 하단을, 부모요소 콘텐츠영역의 하단에 정렬​​
Top	요소의 인라인박스의 상단을, 라인박스의 상단에 정렬​​​
Bottom	요소의 인라인박스의 하단을, 라인박스의 하단에 정렬
Sub	요소의 인라인박스의 baseline을 부모박스의 아래첨자의 적절한 위치로 내림 (이 값은 요소 텍스트의 font size에는 영향을 주지 않음)
Super	​요소의 인라인박스의 baseline을 부모박스의 윗첨자의 적절한 위치로 올림 (이 값은 요소 텍스트의 font size에는 영향을 주지 않음)

출처 : http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0-vertical-align-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-1%EB%B6%80/