[비전공자를 위한 HTML/CSS] (24) CSS 속성- boxmodel

BOXMODEL의 구성

 

• content
    요소의 실제 내용을 포함하는영역. 내용의 너비와 높이를 나타냄.
  
  
• border
    content 영역을 감싸는 테두리 선.
  
  
• padding
    content 영역과 border 사이의 여백. content 영역의 배경, 색 또는 이미지가 있을때 padding 영역까지 영향을 미침. 따라서 padding 영역은 content의 연장선으로 볼 수 있다.
• margin
    border의 바깥 영역. border와 구분하기 위해 쓰이는 빈 영역으로 주변 요소와의 여백(간격)을 지정할 수 있다. 

 

div{
  width: 1000px;
  height: 100px;
  border: 10px solid red;
}

border

 

div{
  width: 1000px;
  height: 100px;
  border: 10px solid red;
  padding: 60px;
}

padding

 

div{
  width: 1000px;
  height: 100px;
  border: 10px solid red;
  padding: 60px;
  margin: 50px;
}

margin