CSS_박스 모델

모든 HTML 요소는 박스 모양으로 구성
박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함

 

1.내용(content)

텍스트나 이미지가 들어있는 박스의 실질적인 내용부분

2.패딩(padding)

- 내용과 테두리 사이의 간격
- padding-top, padding-right, padding-bottom, padding-left
- padding: 위 오른쪽 아래 왼쪽순으로 설정

설정시 암묵적인 부분이 있으므로 예시를 통해 알아보자

padding:20px 50px 30px 10px
위 20 오른쪽 50 아래 30 왼쪽 10
padding:20px 50px 30px
위 20 오른쪽,왼쪽 50 아래30
padding:20px 50px
위,아래 20 오른쪽,왼쪽 20
padding:20px
전부 20

3.테두리(border)

-내용(content) 과 패딩(padding) 주변을 감싸는 테두리

-border-style(테두리 모양)

-border-color(테두리 색깔)

-border-width(테두리 두께)

-border(한번에 설정)

4.마진(margin)

-테두리(border)의 이웃하는 요소들 사이의 간격
-마진은 눈에 보이지 않음
-세로 겹침 현상이 일어남

 

✔새로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘중 큰값을 선택하는 현상

 

●박스 사이징(box-sizing)
- width,height 값에 사이즈 입히기 =content영역만!  padding,border 영역은 포함되지 않음

-만약 width가 100% 로 설정되는 경우 padding이나 border 속성을 추가하면 안됨
-box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함하여 계산한다!