작업을 하다 보면 글이 붙어 있다던지 박스가 붙어 있어서 여백을 좀 줘야 할 때 쓰는 경우로 margin과 padding이 있다.
margin:10px 0;
이렇게 두개만 쓰면 앞쪽 위아래에 10px의 여백을 좌우는 0을 준다는 뜻
margin:10px 0px 0px 5px;
이러면 시계방향으로 생각하면 된다.
위 10픽셀 오른쪽 0 아래 0 왼쪽 5px의 마진을 준다는 뜻이다.
margin:5px 10px 50px;
이렇게 3개를 쓸 때가 몰랐을 때는 제일 헷갈리기도 했었는데
위쪽과 아래쪽에 5px을 오른쪽은 10px을 왼쪽은 50px을 준다는 뜻이다.
그리고 마지막으로 하나만 줄 경우
margin:5px;
이렇게 하나만 쓸 경우에는 상하좌우 전부 균일하게 5px을 준다는 뜻.
이는 padding도 마찬가지다.
즉 쓸수 있는 갯수는 아래와 같다
padding:5px(전체)
padding:5px 10px(위아래 5px 좌우 10px)
padding:10px 5px 20px(위아래 10px 오른쪽 5, 왼쪽 20)
padding:5px 6px 7px 8px(시계방향 위,오른쪽,아래,왼쪽)
그리고 마진으로 센터 정렬을 하고 싶을 경우는
margin: 0 auto; 좌우 정렬이 되어 가운데에 나온다.
부모의 속성이나 자기자신의 속성에 따라 혹은 브라우저에 따라 안되기도 하는데 그 땐 추가적인 속성을 지정해야 한다.