padding과 margin의 차이

padding과 margin

 

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

margin

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

CSS

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 : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

JAVASCRIPT

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

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

 

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

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

CSS

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 : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

JAVASCRIPT

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

 

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

padding

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

CSS

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 : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

JAVASCRIPT

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

 

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

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

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

CSS

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

속성값

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

자바스크립트 문법

JAVASCRIPT

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

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

 

출처 : https://webdir.tistory.com/346

CSS 여백속성(Margin, Padding Property)