css - boxmodel/boxsize, padding, margin, table

박스 모델
1) padding - 요소의 내부여백 설정
* left, right, top, bottom 각각 설정
padding-left:20px;
padding-right:30px;
padding-top:50px;
padding-bottom:60px;
* 전체설정
padding:30px; (위아래)
padding:20px 30px; (좌 우)
padding:20px 30px 40px; (위 좌우 아래)
padding:20px 30px 40px 50px; (위 우 아래 좌)

 

※box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지를 지정
속성값: 
border-box(테두리를 기준으로 크기를 정함) 
content-box(컨텐츠 영역을 기준으로 크기를 정함)

2) margin - 요소의 바깥여백 설정
margin 겹침현상 : margin2개가 겹치게 되면 큰 것만 적용
margin-left:20px;
margin-right:30px;
margin-top:50px;
margin-bottom:60px;
* 전체설정
margin:30px; (위아래)
margin:20px 30px; (좌 우)
margin:20px 30px 40px; (위 좌우 아래)
margin:20px 30px 40px 50px; (위 우 아래 좌)
※margin: 20px auto; (auto : 자동맞춤, width와 무조건 같이 써야함)

3) width - 너비 설정
4) height - 높이 설정

5) border - 테두리 설정
border-color : 테두리 색상 설정
border-style : 테두리 스타일 설정
속성값 
solid : 실선으로 지정
dotted : 점선으로 지정
dashed : 긴 점선으로 지정
double : 이중 실선으로 지정
border-width : 테두리 두께를 지정
ex) div { border-color: black; border-style: solid; border-width: 2px; }
ex) div { border: black solid 2px; }

<table border="1" cellspacing="0" cellpadding="10"></table>
-->
table { border-collapse: collapse; }
td { border: 1px solid #ccc; }