margin 속성은 HTML 요소의 주변 공간을 조절합니다. 다른 컨텐트와 오버래핑 할 수도 있습니다. 음수값을 사용한다면 말이죠.
이 속성의 값은 자식 요소에게 상속되지 않습니다. 그리고 주의할 점은 붙어있는 두 요소간의 top, bottom 마진의 경우 중복 적용이 되는 것이 아니라 큰 숫자만 적용이 된다는 것입니다. 이게 무슨 말이냐고요? 천천히 예제를 따라가보도록 해보세요.
다음은 여백 관련 속성입니다.
margin
margin-bottom
margin-top
margin-left
margin-right
이제 하나하나 예제를 통해서 알아보도록 할까요?
한방에 끝내는 속성입니다. 모든 마진 관련된 속성값을 넣어서 한번에 설정을 할 수 있습니다.
아래는 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 |
이건 뭐 말 안해도 아래족 마진 속성이라는 것을 아실겁니다. 속성값으로는 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 |
|
<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 |
| <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 |
|
<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
| [CSS] 15. Paddings ( 패딩 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 14. Lists ( 리스트, 목록 ) (0) | 2016.06.12 |
| [CSS] 12. Borders ( 테두리, 보더 설정 ) (0) | 2016.06.12 |
| [CSS] 11. Table ( 테이블 설정 ) (0) | 2016.06.12 |
| [CSS] 10. Links ( 링크 설정 ) (0) | 2016.06.12 |