margin

요소의 '외부(바깥) 여백'을 지정

값	의미	기본 값
단위	px, em, cm 등 단위로 지정	0
auto	브라우저가 너비를 계산 (보통 특수한 경우에 사용한다.)
%	부모 요소의 너비에 대한 비율로 지정

 

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  width : 400px;
  height: 200px;
  border : 4px solid tomato;
}

.child{
  width: 100px;
  height: 100px;
  border : 4px solid;
  margin : 50%
}

자식요소 margin은 부모요소 가로 길이의 50% 사용했다는걸 알 수 있다.

결과값을 보면 알 수 있듯이, 자식요소의 margin은 자식태그 기준에 50%가 아닌, 부모태그의 가로길이 50%로 만들어졌다는걸 알 수 있다.

 

 

* 사용법

margin : 위 우 아래 좌;
margin : 위 [좌, 우] 아래;
margin : [위, 아래] [좌,우];
margin : [위, 아래, 좌, 우];

.box{
    maring: 10px 20px 30px 40px;
    marign: 10px 20px 40px;
    marign: 10px 40px;
    maring: 10px;
 }

 

일반적으로는 단축속성을 사용하는것이 편리하고 좋지만, 딱 한군대만 지정해서 설정할 경우에는 다음 밑에와 같이 위치를 지정해서 사용하는 경우도 많다.

1. maring-top

 

2. margin-right

 

3. margin-bottom

 

4. margin-left