[CSS] 여백(margin)속성

CSS margin속성은 정의된 테두리 외부의 요소 주위에 공간을 만드는데 사용된다.

여백을 완전히 제어할 수 있으며, 각 면 (위, 오른쪽, 아래, 왼쪽)에 여백을 설정하는 속성이 있다.

 

각 면에대한 속성

 - margin-top

 - margin-right

 - margin-bottom

 - margin-left

 

모든 여백 속성은 다음 값을 가질 수 있습니다.

 - 자동 : 브라우저가 여백을 계산합니다.

 - 길이 : px, pt, cm 등의 여백을 지정.

 - % : 포함하는 요소 너비의 여백을 %로 지정.

 - 상속 : 여백이 상위 요소에서 상속되어야 함을 지정.

---

 코드를 단축하기 위해 하나의 속성에 여백 속성을 모두 지정할 수 있다.

 

속성 값이 4개 있는 경우

* 여백 : 50px 100px 80px 25px; (예를 들어서 값을 지정해 봄)

상단 여백은 50px

오른쪽 여백은 100px

하단 여백은 80px

왼쪽 여백은 25px

---

속성에 세 개의 값이 있는 경우

 * 여백 : 25px 50px 75px;

상단 여백은 25px

오른쪽 여백은 50px

하단 여백은 75px

---

속성에 두 개의 값이 있는 경우

* 여백 : 25px 50px;

상단 및 하단 여백은 25px

오른쪽 및 왼쪽 여백은 50px

---

속성에 하나의 값이 있는 경우

* 여백 : 25px

네 개의 여백은 모두 25px

---

자동으로 값 주기

여백 속성을 설정하여 auto 해당 컴테이너 내에서 요소를 가로로 중앙에 배치할 수 있습니다.

요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.

width: 100px;
margin: auto;
border: 2px solid red;