[CSS 006] Box Model (margin, border, padding)

 

 

출처 : https://www.washington.edu/accesscomputing/webd2/student/unit3/module4/lesson1.html

 

 

Margin

테두리(border) 바깥 쪽 여백

 

 

✔ 상하좌우 모두

margin : 10px ;

✔ 상하, 좌우

margin : 10px 20px ;

✔ 상,우,하,좌 (위쪽부터 시계방향)

margin : 10px 20px 10px 20px ;

 

✔ 각각 지정하기 

margin-top : 10px;
margin-right : 10px;
margin-bottom : 10px;
margin-left : 10px;

 

 

 

 

📌 margin collapsing 마진 상쇄

 

margin-top과 margin-bottom이 각각 10px로 지정되어있는 두 태그(블록요소)가 

20px 이어야하는 둘 사이의 마진이 실제로는 10px로 표현되는 현상이다. 

이를 마진 상쇄(margin collapsing) 또는 마진 겹침(margin overlap)이라고 한다. 

이때는 상,하 각각의 마진을 20px로 하여 해결한다. 

 

🍯 가운데 정렬을 위한 도구로 margin 활용하기

margin-left:auto;
margin-right:auto;

위와 같이 마진 좌우를 auto로 설정해주면 브라우저가 여백을 자동으로 계산하여 좌우에 동일한 값을 지정한다. 

그래서 margin을 가운데 정렬을 위한 도구로 사용하는 경우도 많다.

(display 속성이 block인 요소에만 해당)

 

---

 

 

Border

내용을 둘러싼 테두리

 border 속성을 추가하지 않으면 기본적으로 테두리는 보이지 않는다.

 

✔ 두께 ✔스타일 ✔색상

border-width : 6px;
border-style : solid;
border-color : blue;

 

 하나의 속성에 두께, 유형, 색상을 모두 적용

border : 6px solid blue;

 

 

 

 

🎈다양한 border-style

 

테두리의 Style 속성에는 solid, dotted, dashed, double, inset, outset 이 있다. 

 

💡 예시

💡 결과

 

 

🎈더 세분화된 테두리

 

border-top,bottom,left,right 각각에 해당하는 두께, 스타일, 색상을 지정해 줄 수도 있다. 

 

💡 예시

💡 결과

 

 

---

 

 

Padding

테두리(border) 안 쪽 여백

 

✔ 각각 지정하기

padding-top
padding-right
padding-bottom
padding-left

✔ 상,우,하, 좌 (위쪽부터 시계방향) 

padding: 4px 6px 4px 6px;