#07 CSS 박스 모델

 

margin

• 요소의 바깥 여백을 지정하는 속성 (테두리 밖)
• 인라인 요소에는 상하 margin이 적용되지 않는다.
• 인접한 요소의 margin은 더 큰 값으로 상쇄되어 하나만 적용된다.
• 부모 요소에 padding이나 border가 적용되어있지 않다면
  첫 번째 자식 요소의 margin-top은 부모 요소의 margin-top처럼 보여진다.

 

- 속성 값의 개수에 따른 축약형

margin : 상 우 하 좌; (시계방향)
margin : 상 좌우 하;
margin : 상하 좌우;
margin : 상하좌우;

 

<div class="pink">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="lightblue">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="pink">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

.pink {
  width: 300px;
  background-color: pink;
}
.lightblue {
  width: 300px;
  background-color: lightblue;
  margin: 20px 0px 50px 30px;
}

---

 

---

padding

• 요소의 안쪽 여백을 지정하는 속성 (테두리와 콘텐츠 사이)

 

- 속성 값의 개수에 따른 축약형

padding : 상 우 하 좌; (시계방향)
padding : 상 좌우 하;
padding : 상하 좌우;
padding : 상하좌우;

 

.lightblue {
  width: 300px;
  background-color: lightblue;
  margin: 20px 0px 50px 30px;
  padding: 20px;
}

---

 

---

border

• 요소의 테두리를 지정하는 속성

 outline

• 요소의 외곽선을 지정하는 속성
• border는 요소 크기에 영향을 주지만 outline은 크기에 영향을 주지 않는다.

 

- 축약형

• 두께 속성은 필수이며, 나머지 속성은 필요에 따라 선택할 수 있다.

border : width style color;
outline : width style color;

 

- style 속성 값

• none : 테두리를 표시하지 않는다
  (가장 낮은 우선순위로 인접한 요소가 테두리를 갖는다면 테두리를 표시한다)
• hidden : 테두리를 표시하지 않는다
  (가장 높은 우선순위로 인접한 요소가 테두리를 갖더라도 테두리를 표시하지 않는다)
• dotted : 점선
• dashed : 파선
• solid : 실선
• double : 이중선
• groove : 테두리가 파인 것처럼 표현
• ridge : 테두리가 튀어나온 것처럼 표현
• inset : 요소가 파인 것처럼 표현
• outset : 요소가 튀어나온 것처럼 표현

 

border-radius

• 요소의 모서리를 둥글게 지정하는 속성
• 값을 50%로 주었을 때 원형으로 표시된다

 

<div class="border">
  border
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="outline">outline</div>

.border {
  width: 300px;
  height: 200px;
  border: 5px solid red;
  margin-bottom: 30px;
}
.child {
  width: 50px;
  height: 50px;
  background-color: coral;
  border-radius: 10px;
  margin: 20px;
}
.child:nth-child(2) {
  border-radius: 50%;
}
.outline {
  width: 300px;
  height: 200px;
  outline: 5px solid blue;
}

---

 

---

CSS 박스 모델

* CSS box model *

 

---

box-sizing

• 요소의 너비와 높이에 포함시킬 속성을 지정하는 속성

 

- 속성 값

• content-box : 너비와 높이에 content 영역만 포함시킨다 (default)
  width = content width
• border-box : 너비와 높이에 content 영역, padding 영역, border 영역을 포함시킨다
  width = content width + padding + border

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 20px;
}
/*
  [ content-box ]
  content width = 300px
  total width = 300px + 20px*2 + 5px*2 = 350px
*/
.content-box {
  box-sizing: content-box;
  border: 5px solid orange;
}
/*
  [ border-box ]
  content width = 300px - 20px*2 - 5px*2 = 250px
  total width = 300px
*/
.border-box {
  box-sizing: border-box;
  border: 5px solid green;
}

---