CSS 박스 속성
HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다.
ㄴ padding속성은 내용과 테두리 사이의 간격을 지정
ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정
ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정
margin 속성
박스 테두리 밖의 여백을 지정.
margin : 상(top) 우(right) 하(bottom) 좌(left)
margin : 상 좌우 하
margin : 상하 좌우
margin : 상화좌우
margin-top, margin-right, margin-bottom, margin-left 각자 지정 가능
2개 이상의 박스가 인접 한 경우 : 아래마진과 위마진 중 큰 값을 갖는 하나의 마진으로 합쳐진다.
margin : <길이> | <퍼센트>| auto ;
- <길이> => px, pt, cm 등으로 여백의 크기를 지정(기본 값 0)
- <퍼센트> => 포함하는 요소의 폭에 대한 백분율로 크기를 지정
- auto => 브라우저가 자동으로 지정
padding 속성
요소 내용과 테두리 사이의 여백을 지정.
padding : 상(top) 우(right) 하(bottom) 좌(left)
padding : 상 좌우 하
padding : 상하 좌우
padding : 상화좌우
padding-top, padding-right, padding-bottom, padding-left 각자 지정 가능
padding : <길이> | <퍼센트> ;
- <길이> => px, pt, cm 등으로 여백의 크기를 지정(기본 값 0)
- <퍼센트> => 포함하는 요소의 폭에 대한 백분율로 크기를 지정
마진, 패딩 설정 결과
박스의 margin padding 설정 안함
박스의 margin(20pt 40pt 60pt 80pt) padding(5% 10% 5% 10%)
박스의 margin(10% 20% 15% 5%) padding(40px 60px 30px 50px)
박스의 margin(10%) padding(5%)
마진, 패딩 설정 결과 - hr제거 시 아래마진과 위마진 중 큰 값을 갖는 하나의 마진으로 합쳐진다.
박스의 margin padding 설정 안함
박스의 margin(20pt 40pt 60pt 80pt) padding(5% 10% 5% 10%)
박스의 margin(10% 20% 15% 5%) padding(40px 60px 30px 50px)
박스의 margin(10%) padding(5%)