css - 4 (상자)

box- 상자

- 컨텐츠가 자리하는 영역

-어떠한 영역의 가로 록, 세로폭, 안 여백, 바깥 여백, 테두리 등은 주로 블록 요소에사 적용된다

 

1.width

- 박스의 가로 사이즈를 말하는데 여백을 포함하지 않는 크기로 px, %, em 등의 단위로 된 수치를 쓸 수 있고, 많은 브라우저 오류가 가로사이즈를 기재함으로써 치유되므로 가장 중요한 속성중 하나

 

2. height

- 박스의 세로 사이즈를 말하는 역시 여백을 포함하지 않는 크기로 px, %, em 등의 단위로 된 수치를 쓸 수있습니다.

높이값 속성은 레이아웃 작없에서 float을 해제할 때 쓰는 경우가 있지만 장문의 텍스트 상자에서는 레이아웃을 설계하는데 오히려 방해가 되므로 높이값은 가능한 사용하지 않는 것이ㅣ 좋습니다.

 

3. padding

- 박스의 안쪽 여백 

- 내용과 테두리 사이이 간격을 말하는 것

 

padding: 10px  상하좌우 안쪽 여백 10px     

padding : 10px, 20px  상하 10px; 좌우 20px

padding : 10px, 20 px, 30px  상 10px 좌우20 , 하 30px

padding : 상 10px, 우 20px, 하30px,좌 40px; 

padding -top, right ,bottom,left

 

4. margin 

- 박스의 바깥쪽여백

- 테두리와 다음 박스 영역사이의 간격

- 특정브라우저에서 오류를 많이 일으키므로 가능한 사용하지 않는것

 

* 두개의 값을 써서 세로 가로 여백을 설정하는 형식 가운데 정렬

margin :세로값 auto; 중앙에 설정한 크기의 박스 배치