[CSS] 13. Margins ( 마진, 여백 )

margin 속성은 HTML 요소의 주변 공간을 조절합니다. 다른 컨텐트와 오버래핑 할 수도 있습니다. 음수값을 사용한다면 말이죠.

이 속성의 값은 자식 요소에게 상속되지 않습니다. 그리고 주의할 점은 붙어있는 두 요소간의 top, bottom 마진의 경우 중복 적용이 되는 것이 아니라 큰 숫자만 적용이 된다는 것입니다. 이게 무슨 말이냐고요? 천천히 예제를 따라가보도록 해보세요.

다음은 여백 관련 속성입니다.

• margin 

• margin-bottom  

• margin-top  

• margin-left  

• margin-right  

이제 하나하나 예제를 통해서 알아보도록 할까요? 

The margin Property:

한방에 끝내는 속성입니다. 모든 마진 관련된 속성값을 넣어서 한번에 설정을 할 수 있습니다.

아래는 p 태그 주변에 마진을 설정할 때의 마진 속성 사용법입니다. 

<style type="text/css"> p {margin: 15px} all four margins will be 15px p {margin: 10px 2%} top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. p {margin: 10px 2% -10px} top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px p {margin: 10px 2% -10px auto} top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </style>

 

예제를 한번 보시죠. 

<p style="margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style="margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> <p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p> <p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>

결과는 아래와 같습니다.

all four margins will be 10px top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

 

The margin-bottom Property:

이건 뭐 말 안해도 아래족 마진 속성이라는 것을 아실겁니다. 속성값으로는 length, % 또는 auto 를 가질 수 있습니다.

<p style="margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style="margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified bottom margin This is another paragraph with a specified bottom margin in percent

 

The margin-top Property:

위와 동일합니다.

<p style="margin-top: 15px; border:1px solid black;"> This is a paragraph with a specified top margin </p> <p style="margin-top: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified top margin This is another paragraph with a specified top margin in percent

 

The margin-left Property:

위와 동일합니다.

<p style="margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin </p> <p style="margin-left: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p>

 

결과는 아래와 같습니다. 

This is a paragraph with a specified left margin This is another paragraph with a specified top margin in percent

The margin-right Property:

위와 동일합니다.

<p style="margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin </p> <p style="margin-right: 5%; border:1px solid black;"> This is another paragraph with a specified right margin in percent </p>

 

결과는 아래와 같습니다. 

This is a paragraph with a specified right margin This is another paragraph with a specified right margin in percent

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_margins.htm