[CSS] margin, padding과 박스 사이즈 계산

margin

요소의 외부 여백을 지정, 요소의 외부에 공간을 만들어서 주변 요소를 공간만큼 밀어내는 개념

(요소의 크기는 변하지 않음, 자주 사용하지 않지만 음수값을 사용할 수 있다)

기본값 : 0

단위 : px등 단위

 

div {
	margin: 20px;
}

 

padding

요소의 내부에 여백(공간)을 지정, 내부에 여백이 생기기 때문에 요소의 크기가 커진다.

(%를 이용해 부모요소의 가로 너비에 대해나 비율로 지정 가능)

기본값 : 0

단위 : px등 단위

div {
	padding: 20px;
}

 

※ auto : 브라우저가 자동으로 여백을 계산

 

적용 방향

1. 값을 하나만 지정한 경우 

상하좌우 모든 방향에 적용

margin : 20px;
padding : 20px;

2. 값이 두개

상 하 / 좌 우

margin : 30px 20px;
padding : 30px 20px;

3. 값이 세개

상 중(좌, 우) 하

margin : 30px 20px 10px;
padding : 30px 20px 10px;

 4. 값이 모두 있는 경우

시계 방향으로 상,하,좌,우 순으로 적용

margin : 30px 20px 10px 10px;
padding : 30px 20px 10px 10px;

---

박스 사이즈 계산

box-sizing

요소의 크기를 명시한 그대로 수치를 이용하고 싶을 경우 사용

기본 값 : content-box (요소의 내용으로 크기를 계산)

 

- border-box

요소의 내용 + border + padding 를 합쳐서 계산하기 때문에 작성자가 명시한 크기를 유지한 상태로 내부에 사이즈가 계산

  box-sizing: border-box;