웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS Property margin

Last Modified : 2018-07-25 / Created : 2018-07-10
3,675
View Count
만약 엘리먼트 사이에 간격을 주기 위해서는 CSS의 프로퍼티 margin을 사용할 수 있습니다. 이 프로퍼티는 각 요소간에 원하는 만큼 여백(spacing)을 주게됩니다. 아래는 margin 프로퍼티를 사용하는 방법과 예제소스입니다.




# CSS margin property 사용방법

먼저 각 html의 각 요소들을 상하좌우 간격을 조정할 수 있습니다. 이때 margin값을 사용하게되는데 방법은 아래와 같이 사용합니다.습니다.

margin: 10px;

이때 적용된 값이 하나인 경우는 상하좌우 모두 같은 크기가 적용되게됩니다.


! margin 축약 프로퍼티 사용하기

위와 같이 상하좌우에 동일한 값을 적용하는 경우가 아니라 단 하나의 방향만 margin값을 추가할 경우 어떻게해야할까요? 이 경우 축약 프로퍼티를 사용할 수 있습니다.

  • margin-top
  • margin-right
  • margin-left
  • margin-bottom

위 프로퍼티를 사용하면 더 간단하고 빠르게 적용할 수 있겠죠. 아래의 두 css 룰은 동일하게 적용됩니다.
margin: 0 0 0 20px;  /*  좌측으로 여백 20 적용 */

margin-left: 20px;  /* 위와 동일하게 좌측 여백 20 적용 */

축약 프로퍼티보다는 일반적으로 margin을 사용하는 방법이 더 많이 사용됩니다. 만약 css가 중복으로 사용되는 경우... 예를들어 div 태그에 이미 margin: 20px;이라고 전체 방향에 여백이 설정되어 있는데 아래방향만 30px로 바꾸고 싶다면? 이 경우에 추가로 margin-bottom: 30px;을 추가할 수 있습니다. 아래와 같이 적용할 수 있죠.

@ 이미 선언된 CSS 룰
.test { margin: 20px; }

@ 아래 여백만 바꾸고 싶어 추가한 CSS
.test { margin-bottom: 20px;



! margin 상하좌우 다르게 값 적용하기

만약 각각 다르게 주고 싶다면 아래처럼 top right bottom left의 순서에 따라 달리 값을 주는 것이 가능합니다.
margin: 5px 20px 30px 100px;

이미지) top, left, right, bottom 다르게 적용된 CSS 값

위와 같이 사용하는 경우는 매우 많은데 상하 좌우만 따로 적용할 수도 있습니다. 아래를 봐주세요.
margin: 10px 20px;

위와 같이 적용될 경우 어떻게될까요? 이 경우 상하 top, bottom은 각각 10px 그리고 좌우는 20px씩 가지게됩니다.


참고로 값을 세가지만 사용할 수도 있습니다.
margin: 10px 0 0;

이 경우에도 역시 순서에 따라 top, right, bottom에 각각 10px, 0, 0이 적용되게됩니다. 그리고 left에는 0이 적용되게됩니다.



# CSS margin 속성 예제보기

아래는 여러 margin 값을 가지는 예제입니다. 각각 어떻게 나타나는지 확인해보시기 바랍니다.
<div class="test block">TOP</div>
<div class="test inline-block">LEFT</div>
<div class="test1 inline-block">TEST</div>
<div class="test inline-block">RIGHT</div>
<div class="test block">BOTTOM</div>

@ test1.css
.test1 {
  margin: 0 10px 50px 100px;
}

.test {
  width: 50px;
  height: 50px;
  border: 1px solid;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

 아래는 위 코드를 실제 구현한 모습입니다.

Previous

CSS Property color

Previous

[CSS] 웹사이트에 Print 프린트, 인쇄 버튼 만들기