[CSS] 여백, 테두리 관련 속성

[CSS] 여백, 테두리 관련 속성

By i!kohong(아이코홍)

---

바깥 여백과 관련된 속성 [상속이 안되며, 모든태그에 적용이 가능하다.]

---

속성	설명
margin-top	바깥 위쪽 여백(cm, %, auto)을 지정한다.
margin-right	바깥 오른쪽 여백(cm, %, auto)을 지정한다.
margin-bottom	바깥 아래쪽 여백(cm, %, auto)을 지정한다.
margin-left	바깥 왼쪽 여백(cm, %, auto)을 지정한다.
margin	바깥 여백을 한번에 지정한다. 예시) margin : 2cm 1cm 3cm 2cm

---

안쪽 여백과 관련된 속성 [상속이 안되며, 모든태그에 적용이 가능하다.]

---

속성	설명
padding-top	내부 위쪽 여백(cm, %, auto)를 지정한다.
padding-right	내부 오른쪽 여백(cm, %, auto)를 지정한다.
padding-bottom	내부 아래쪽 여백(cm, %, auto)를 지정한다.
padding-left	내부 왼쪽 여백(cm, %, auto)를 지정한다.
padding	내부 여백을 한번에 지정한다. 예시) padding : 2cm 1cm 3cm 2cm

---

테두리와 관련된 속성 [상속이 안되며, 모든태그에 적용이 가능하다.]

---

속성	설명	하위 속성
width	테두리 굵기(thin, medium, thick, em)를 지정한다.	border-left-width | border-right-width | border-bottom-width | border-top-width | border-width border-width속성은 테두리의 굵기를 한번에 지정 예시) border-wdith : thin medium 2em thick
color	테두리의 색(색상이나 색상코드)을 지정한다.​	border-left-color | border-right-color | border-bottom-color | border-top-color | border-color border-color 속성은 테두리의 색을 한번에 지정한다. 예시) border-color : red green blue red
style	테두리의 스타일(none, dotted, dashed, solid, double, groove, ridge, inset, outset)을 지정한다.	border-left-style | border-right-style | border-bottom-style | border-top-style | border-style border-style 속성은 테두리의 스타일을 한번에 지정한다. 예시) border-style : double dotted
전체 지정	방향별 전체 속성(width style color)을 지정한다.	border-left | border-right | border-bottom | border-top | border border 속성은 테두리의 색,굵기,스타일을 한번에 지정한다.