CSS 여백속성(Margin, Padding Property)

CSS 속성중에 요소의 여백을 결정하는 속성들에 대하여 알아봅니다.

margin

축약 속성이며, 요소의 테두리 외부에 투명한 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다.

h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */
h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */
h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */
h4 {margin: 10px;} /* all four margins are 10px */

속성값

• auto : 브라우저가 마진을 계산한다.
• length(길이) : 마진을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.기본값은 0px이다.
• %(퍼센트) : 마진을 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.margin="10px 5px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

margin-top, margin-right, margin-bottom, margin-left

요소의 마진값을 각기 방향으로 지정한다.

p {
  margin-top:20px;
  margin-right:15px;
  margin-bottom:10px;
  margin-left:15px;
}

속성값

• auto : 브라우저가 마진을 계산한다.
• length(길이) : 마진을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 기본값은 0px이다.
• %(퍼센트) : 마진을 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.marginTop="10px"
object.style.marginRight="10px"
object.style.marginBottom="10px"
object.style.marginLeft="10px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

padding

축약 속성이며, 요소의 테두리 안쪽과 콘텐츠 사이의 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다.

h1 {padding:10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */
h2 {padding: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */
h3 {padding: 10px 5px;} /* top & bottom-10px, right & left-5px */
h4 {padding: 10px;} /* all four paddings are 10px */

속성값

• length(길이) : 패딩을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 기본값은 0px이다.
• %(퍼센트) : 패딩을 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.padding="10px 5px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

padding-top, padding-right, padding-bottom, padding-left

요소의 패딩값을 각기 지정한다.

p {
  padding-top:20px;
  padding-right:15px;
  padding-bottom:10px;
  padding-left:15px;
}

속성값

• length(길이) : 패딩을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 기본값은 0px이다.
• %(퍼센트) : 패딩을 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.paddingTop="10px"
object.style.paddingRight="10px"
object.style.paddingBottom="10px"
object.style.paddingLeft="10px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.