[CSS] 박스(영역) 크기

박스 크기

/* 영역별 크기 지정 */
width: 100px;
height: 100px;

/* 영역별 크기 지정: %는 높이값이 지정되지 않음 */
width: 20%;
height: 20%;

/* 영역별 크기 지정: 브라우저 가로 크기 기준(100등분) 지정 */
width: 20vw;
height: 20vw;

/* 영역별 크기 지정: 브라우저 세로 크기 기준 지정 */
width: 20vh;
height: 20vh;

/* 바깥 여백 지정 */
margin: 20px /* 상하좌우 여백 */
margin: 20px 50px;/* 상하, 좌우 여백 */
margin: 20px auto /* 상하는 20px, 좌우는 가운데 균등 배치 */
margin: 20px auto 40px /* 상, 좌우, 하 여백 */
margin: 0px 10px 20px 30px /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백*/
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;

/* 내부 여백 지정 */
box-sizing: border-box /* 박스 크기에 padding값 흡수(박스 크기) */
padding: 20px;
padding: 20px 50px;/* 상하, 좌우 여백 */
padding: 20px auto /* 상하는 20px, 좌우는 가운데 균등 배치 */
padding: 20px auto 40px /* 상, 좌우, 하 여백 */
padding: 0px 10px 20px 30px /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백*/
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;

- block: h1-h6, p, ol, ul, dl, div, header, footer, section. 블록 요소는 자동 줄 바꿈

- inline: strong, em, span. 줄바꿈 없이 좌우로 배치. 넓이와 높이 변경 불가. 서식의 기능 배치 및 글자 꾸밈 용도

/* block 요소: 넓이와 높이 변경 가능 */
display: block
width: 50px;
height: 50px;

/* inline 요소의 강제 크기 변경시 inline-block 사용 */
display: inline-block;
height: 50px;