CSS padding, margin / 박스 크기 계산

한 줄 정리

padding: 컨텐츠 안쪽 여백

margin : 컨텐츠 바깥쪽 여백

box-sizing : 컨텐츠 사이즈 고정 or 유동

box-sizing: content-box; : border width +  padding size 전부 포함한 값을 유동적으로 출력

 

box-sizing: border-box; : border width + padding size + contents size 를 전부 포함한 값을 고정

 

 

---

 

 

 

# 박스 모델 영역

 

-브라우저가 렌더링할때 각각의 요소는 기본적으로 사각형 형태의 영역을 차지하게된다.
-이 영역을 박스모델이라고 하며 CSS는 박스의 크기, 형태, 속성을 결정할 수 있다.

-컨텐츠 영역 : width(너비) , height(높이)
-안쪽 여백 : padding
-테두리 : border-width

 

컨텐츠 영역 = 컨텐츠 영역(width+height) + 안쪽 여백(padding) + 경계선(테두리)(border)

-바깥쪽 여백 : margin

 

 

 

-인라인 영역과 블럭 영역 모두 padding과 margin이 적용된다.

(둘의 차이는 인라인은 가로와 높이를 지정해주지 못하는 것임 - 인라인 영역에 할당된 크기 만큼만 사용이 가능한 것이다)

 

-padding 적용(보라색 부분)

 

-padding의 크기가 커질수록 내부의 크기가 증가된다.

-padding은 내부로 부터 떨어진다. 라고 이해하자.

보라색 영역의 범위가 점점 늘어난다.

 

 

-margin 적용(노랑색 면 4개의 면이 전부 적용된다)

 

-margin 값을 늘리면 점점 내부의 크기는 좁아진다.

-외부로 부터 떨어지는 크기가 점점 증진되기 때문에, 내부가 줄어들 수 밖에 없다.

-외부의 범위가 넓어진다, 외부로 부터 떨어지게 된다. 라고 이해하자.

 

 

합계가 100x100이 아닌 110x110으로 되어있다(선 굵기 포함)

 

 

padding 추가 130x130

 

 

margin 추가(컨텐츠와 컨텐츠 사이에 간격이기에, 컨텐츠 자체 크기가 커지진 않는다)

 

 

각각의 영역에 padding 값을 주었다.

 

 

각각의 영역에 margin 값을 주었다.

 

 

 

-상하, 좌우도 간단하게 입력이 가능하다.(padding margin 둘 다 동일)

    /* 4면 */
    padding: 10px;
    /* 상하 좌우 */
    padding: 10px 30px;
    /* 상 좌우 하 */
    padding: 10px 30px 50px;
    /* 상 우 하 좌 */
    padding: 10px 30px 50px 40px;

 

 

---

 

 

 

## 박스의 크기 계산

 

-우리는 박스 모델의 각 영역을 확실히 구분해야 한다.

-박스 모델의 중심에는 컨텐츠영역이 있다.
 컨텐츠 영역은 개발자가 태그안에 포함한 내용을 표시한다.
 여기에는 너비와 높이를 사용하여 그 크기를 조절 할 수있다.

-컨텐츠 영역의 밖에는 패딩속성을 통해서 안쪽 여백이 존재한다.
 테두리와 컨텐츠 사이에 공간을 확보하는 역할을 한다.

-테두리는 컨텐츠를 감싸서 요소와 요소가 아닌 공간사이에 경계선을 긋는 역할을 한다. 
  보더 속성을 사용하여 그 두께나 보양을 조절할 수있다.

-해당 요소와 다른 요소사이에 여백을 두어 요소와 요소 사이에 공간을 확보하는 역할을 한다.

-박스모델의 네 영역중 테두리까지가 실제 역할을 수행하며 바깥쪽 여백은 요소간의 거리를 확보하는 역할을 수행한다.

 

-width = border (5px + 5px) + padding (10px + 10px) + 100px = 130px

- height = border (5px + 5px) + padding (20px + 20px) + 100px = 150px

 

 

 

-box-sizing (위와 같이 컨텐츠로 지정해준 값이 달라질 때 지정해준 컨텐츠 값을 고정하고 싶을 때)

 

box-sizing: content-box; 위와 같이 border의 두께와 padding의 값까지 계산을 하겠다.

 

box-sizing: border-box; 높이와 너비를 이 값으로 고정시키겠다. (padding이 얼마던, border 값이 얼마던)

 

border-box 적용!