정보더미

Width와 Height는 해당 태그의 실제 표시되는 영역의 크기를 지정한다.
이때 Padding(실제 표시 영역에서 Border 까지의 공백을 말한다), Boder(실제 표시되는 영역 외곽선 Padding을 추가한 외곡선을 말한다)를 의 두께, Margine(Border에서 다른 태그와의 공백을 말한다)를 제외한 실제로 표시되는 영역의 크기이다.

위 이미지에서 파란색 부분이 Width와 Height이며,
파란색 박스의 경계선과 검은색 사각형 사이의 공백을 padding
검은색 박스를 border
border과 최고 바깥의 회색빛 사각형 영역 사이의 공백을 margin이다

길이는 고정적 길이, 상대적 길이, auto로 표시할 수 있다
고정적 길이는 윈도우나 영역의 크기가 변경 되더라도 변경되지 않는 길이이고, 고정적 단위로는 mm(밀리미터:1mm), cm(센티미터:1cm), in(인치미터:1in), pt(포이트:1pt), px(픽셀:1px), pica,em,ex가 있다.

표기	단위	의미
px	픽셀 수	픽셀 수
in	인치	인치 단위
mm	미리미터	미리미터 단위
pt	포인트 수	1/72인치를 1포인트
dp	해상도 비의존의 픽셀 수	실제 픽셀 수는 사용 중 화면의 해상도에 의해 변함
sp	폰트사이즈를 고려한 픽셀 수	유저가 설정하고 있는 폰트사이즈를 고려한 픽셀 수

상대적 길이는 영역이나 대상의 전체 크기에 대한 상대적 크기이다, 상대적 단위로는 %(퍼센트:1%)를 사용한다.
auto는 브라우저의 기본 값이다.

windth와 height에는 실제 표시되는 영역만을 나타낸다.
width 속성은 실제 표시되는 영역의 폭 길이, widht:길이;
height 속성은 실제 표시되는 영역의 높이, height:길이;

padding은 위의 width와 height의 사각형과 border 사이의 공백을 말합니다.
padding 속성 다음에는 4개 까지의 길이를 쓸수 있다.
길이는 고정적 길이와 상대적 길이로 지정할 수 있다.
하나의 길이만 지정하면 길이는 위,아래,왼쪽,오른쪽 모두 동일한 길이로 padding을 적용. padding:길이;
두개의 길이를 지정하면  첫번째 길이는 위,아래의 padding 길이고, 두번째 길이는 왼쪽,오른쪽의 padding 길이다. padding:길이 길이;
세개의 길이를 지정하면  첫번째 길이는 위 padding 길이, 두번째 길이는 왼쪽,오른쪽 padding 길이, 세번째 길이는 아래쪽 padding 길이다. padding:길이 길이 길이;
네개의 길이를 지정하면 첫번째 길이는 위 padding 길이, 두번째 길이는 왼쪽 padding 길이, 세번째 길이는 아래쪽 padding 길이, 네번째 길이는 오른쪽 padding 길이다. padding:길이 길이 길이 길이;
padding 속성 외에 각 방향에 따른 속성을 사용해서 지정할 수 있다.
paddin-top속성은 위 margin의 길이를 지정한다. padding-top:길이;
padding-bottom 속성은 아래 margin의 길이를 지정한다. padding-bottom:길이;
padding-left 속성은 왼쪽 margin의 길이를 지정한다. padding-left:길이;
padding-right 속성은 오른쪽 margin의 길이를 지정한다. padding-right:길이;

margin 속성은 border와 최고 바깥의 박스와의 공백을 magin이라 했다
margin 속성 다음에는 4개 까지 길이를 쓸수 있다.
길이는 고정적인 길이, 상대적 길이, austo를 지정할 수 있다.
하나의 길이만 지정하면 길이는 위,아래,왼쪽,오른쪽 모두 동일한 길이로 margin을 적용. margine:길이;
두개의 길이를 지정하면  첫번째 길이는 위,아래의 margin 길이고, 두번째 길이는 왼쪽,오른쪽의 margin 길이다. margine:길이 길이;
세개의 길이를 지정하면  첫번째 길이는 위 margin 길이, 두번째 길이는 왼쪽,오른쪽 margin 길이, 세번째 길이는 아래쪽 margin 길이다. margine:길이 길이 길이;
네개의 길이를 지정하면 첫번째 길이는 위 margin 길이, 두번째 길이는 왼쪽 margin 길이, 세번째 길이는 아래쪽 margin 길이, 네번째 길이는 오른쪽 margin 길이다. margine:길이 길이 길이 길이;
margin 속성 외에 각 방향에 따른 속성을 사용해서 지정할 수 있다.
margin-top속성은 위 margin의 길이를 지정한다. margin-top:길이;
margn-bottom 속성은 아래 margin의 길이를 지정한다. margin-bottom:길이;
margin-left 속성은 왼쪽 margin의 길이를 지정한다. margin-left:길이;
margin-right 속성은 오른쪽 margin의 길이를 지정한다. margin-right:길이;

CSS 파엘 예입니다.
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
fieldset,img{border:0 none;}
dl,ul,ol,menu,li {list-style:none;}

/* reset */
는 주석을 나타냅니다. CSS에서 주석은 /*로 시작하고 */로 끝납니다.

해당 태그나 클래스 스타일은 {와 }안에 정의합니다.
스타일의 각 속성들은 ;으로 끝납니다.

태그인지 클래스명인지의 구분은 .으로 시작하는wl 않하는지로 구분합니다. .으로 시작하면 클래스명, .이 없으면 태그명이 입니다.
#은 태그의 ID 속성값을 나타냅니다. 정리하면
선두에 아무것도 없으면 태그명
.이 있으면 태그의 Class에 지정된 클래스명
#이 있으면 태그의 ID에 지정된 ID명

예를 들면
#header h1 span {display:none;}는 ID명이 #header인 태그 내에 포함된 h1 태그에서 h1 태그내에 포함된 span 태그의 속성을 지전한것이다.