[CSS]margin (마진) 에 대해 알아보자.

예를 들어 하나의 박스가 있다고 했을때 박스 바깥쪽은 margin 안쪽은 padding 입니다.
물론 박스 위쪽은 margin-top  이고 왼쪽은 margin-left , 오른쪽은 margin-right, 아래쪽은 margin-bottom 입니다. 물론 안쪽으로 padding 도 마찬가지 입니다.

지금은 설명하기 쉽게 하나의 박스를 예를 들지만, margin 값은 여러군데 사용을 하고 있습니다.
가장 많이 사용되고 있는게 박스형태 이기때문에 박스로 설명을 하겠습니다.

위와 같은 박스에서 위, 오른쪽, 아래, 왼쪽이 모두 각기 여백을 갖게 될경우 일일이 margin-top:5px; margin-right:10px; margin-bottom:3px; margin-left:8px; 이렇게 사용해도 되나, 소스가 길어지기 때문에 다음과 방식으로 작성하셔도 됩니다.

margin:5px 10px 3px 8px;

위와 같은 형태가 되며, 외우기 쉽게 시계방향으로 보시면 됩니다. 상,오른쪽,하단,왼쪽 이런순입니다.
만약에 상단여백이 0 일 경우는

margin:0 10px 3px 8px;

이런식으로 사용하시면 됩니다. 0일 경우는 px 같은 단위를 적지 않으셔도 무방합니다.
만약 모든 여백이 5px 일경우는

margin:5px;

이렇게 적으시면 됩니다.

만약 '상하' '좌우' 가 같은 값이 될경우는

 

margin:5px 10px;

  

(5px 이 상단과 하단이 되고, 10px 이 좌우가 되는것입니다.)

'상' 과 '좌우' '하' 이런식의 값을 줄경우는

 

margin:5px 10px 8px;

 

이런식으로 적어주셔도 됩니다.
다시말하면 5px 는 상단값이며, 10px은 좌우 값, 8px는 하단의 값이 되는 것입니다.

마진(margin)은 이런식으로 사용이 되며, 전체 레이아웃의 가운데 정렬을 주고자 할때는
margin:0 auto; 이렇게 적어주시면 웹미니같은 가운데 정렬사이트가 됩니다.

물론 파폭에서는 이값이 제대로 먹지만 익스폴로러에서는 가운데 정렬을 하기 위해서는 text-align:center; 값도 같이 줘야합니다 익스의 버그때문인지는 모르겠지만, margin:0 auto; 만 했을경우 먹지를 않더군요.

소스를 대충 보자면

<style type="text/css">
body { text-align:center; }
#wrap { margin:0 auto; }
</style>

보여지는 페이지에서는

<div id="wrap">가운데 정렬</div>

대충 이런식이 되겠네요.

 

가로정렬 방법 : http://www.webmini.net/296

세로정렬 방법 : http://www.webmini.net/326