여백
margin
margin
- 요소의 외부 여백(공간)을 지정하는 단축 속성
- 0 : 외부 여백 없음
- 음수 사용 가능(ex -10px)
- auto : 브라우저가 여백을 계산(가로/세로 너비가 있는 요소의 가운데 정렬에 활용)
- 단위 : px, em, vw 등 단위로 지정
- % : 부모 요소의 가로 너비에 대한 비율로 지정
margin-방향
margin-top | margin-bottom | margin-left | margin-right
margin은 단축 속성이기 때문에 margin 단독으로 사용할 경우 상하좌우 전체 적용
margin: 10px 20px;차례대로 상하 / 좌우 적용
margin: 10px 20px 30px;차례대로 상 / 좌우 / 하 적용
margin: 10px 20px 30px 40px;차례대로 상 / 우 / 하 / 좌 적용
margin : 0 auto;
- 위 아래에는 값을 주지 않는다.
- 좌우는 균등하게 값을 주어 중앙에 두게 된다.
padding
padding
- 요소의 내부 여백(공간)을 지정하는 단축 속성
- 0 : 내부 여백 없음
- 단위 : px, em, vw 등 단위로 지정
- % : 부모 요소의 가로 너비에 대한 비율로 지정
padding-방향
padding-top | padding-bottom | padding-left | padding-right
padding은 단축 속성이기 때문에 padding 단독으로 사용할 경우 상하좌우 전체 적용
padding: 10px 20px;차례대로 상하 / 좌우 적용
padding: 10px 20px 30px;차례대로 상 / 좌우 / 하 적용
padding: 10px 20px 30px 40px;차례대로 상 / 우 / 하 / 좌 적용
box-sizing
box-sizing
- 각 요소마다 너비, 높이... 크기가 있다. 이를 꾸며주기 위해서는 padding, width를 사용하는데 계산하기가 힘들다.
- 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었다.
요소의 너비와 높이를 계산하는 방법
CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용.
따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 한다.
box-sizing 속성을 사용해 이 방식을 바꿀 수 있다.
box-sizing 속성 종류
content-box | border-box | initial | inherit
1)
content-box
콘텐트 영역을 기준으로 크기를 정합니다.
2)border-box
테두리를 기준으로 크기를 정합니다.
3)initial
기본값으로 설정합니다.
4)inherit
부모 요소의 속성값을 상속받습니다.
padding을 주되, 박스 사이즈에 영향을 주고 싶지 않다면box-sizing : border-box을 사용하면 된다.
