CSS 박스 모델 (Box Model) Margin, Padding, border

목차

CSS 박스 모델

• 콘텐츠 영역
• 패딩(padding) 영역
• 테두리(border) 영역
• 바깥(margin) 영역

CSS 박스 모델 (Box Model)

CSS 박스는 4개의 영역으로 이루어집니다. 각 영역은 콘텐츠(contents) 영역, 안쪽(padding) 영역, 테두리(border) 영역, 바깥(margin) 영역이라고 부릅니다.

콘텐츠 영역

콘텐츠 영역은 Contents edge가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함하고 있는 영역을 말합니다.

 

콘텐츠 영역의 크기는 contents width와 contents height로 정해지고, 배경색과 배경 이미지를 가질 수 있습니다.

div {
  width: 160px;
  height: 80px;
  background-color : red;
}

만약 위와 같은 CSS가 있다고 한다면 width와 height 속성은 콘텐츠 영역에만 영향을 미칩니다.

 

콘텐츠 영역

패딩 (padding) 영역

Padding 영역은 padding edge가 감싼 영역으로, 콘텐츠 영역과 테두리 영역 사이의 여백을 말합니다. 

 

padding의 크기를 정하는 속성에는 padding / padding-top / padding-left / padding-bottom / padding-right 가 있습니다.

아래의 예시처럼 padding을 이용해 한 번에 적용해도 되고 top / left / bottom / right 를 따로 지정해도 줘도 됩니다.

 

예시) padding : 10 px;

 

top, left, bottom, right 모두 10px

예시) padding : 10px 20px;

 

tot, bottom 10px left right 20px

테두리(border) 영역

테두리(border) 영역은 border edge가 감싼 영역을 말합니다. 콘텐츠 영역과 패딩 영역을 감싸고 있습니다.

 

테두리 영역에 대한 설정은 border 속성을 사용해서 합니다. border 속성 또한 padding 처럼 약식 속성입니다.

 

예시) border : 1px solid orange; 

border: 1px solid orange

위의 약식 속성을 풀어서 보면 다음과 같습니다.

• border-width : 1px; = border top left bottom right를 1px로 설정합니다.
• border-style : solid = 테두리를 실선으로 설정합니다. style에서 사용하는 값은 solid(실선), groove(음각), ridge(양각), dashed(짧은선), dotted(점선), doubled(실선 두개) , insert(안쪽 입체), outset(밖쪽 입체감), none(기본값), hidden이 있습니다.
• border-coler : orange = 테두리 색을 오랜지 색으로 설정합니다. 색 설정은 색상 코드 값을 사용합니다.

※style 별 모양을 확인하시려면 style예시를 눌러주세요.

border style  모습 (border 크기 5px 색은 orange로 동일합니다

• solid

border: 5px solid orange

 

• groove

border: 5px groove orange

 

• ridge

border: 5px ridge orange

 

• dashed

border: 5px dashed orange

 

• dotted

border: 5px dotted orange

 

• double

border: 5px doubled orange

 

• inset

border: 5px insert orange

 

• outset

border: 5px outset orange

 

• none

border: 5px none orange

 

• hidden

border: 5px hidden orange

바깥 여백(마진) 영역

margin 영역은 테두리(border)와 다른 요소의 간격을 말합니다. 마진 영역은 눈에는 보이지 않습니다. 즉 배경은 표시되지 않습니다.

 

margin 또한 약식 속성 입니다. 

 

예시) margin : 50px 

margin 50px

margin default