margin, padding - css

margin

margin은 object와 화면과의 외부여백을 의미한다. 정의된 요소 주위에 공간 여백을 늘려준다.

기본 값

margin: length | auto | inherit ;

• length : px, pt, cm, %와 같은 수치값을 입력할 수 있다.
• auto : 수평을 기점으로 자동으로 양옆 속성을 균등하게 맞춰준다.
• inherit : 부모 요소를 상속받는다.

복합 속성

p { margin: 25px 50px 75px 100px ; }

개별 속성

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

개별 속성의 top, bottom, right, left를 복합으로 묶어놓은 속성이 복합 속성이다.

margin 속성의 혼합

p.a { margin: 30px 0; }
p.b { margin: 20px 0; }

동시에 마진 값이 적용될 경우 큰 값만 적용된다.

padding

padding은 object내의 내부여백을 의미한다. 컨텐츠를 기점으로 공간이 생긴다.

margin과 동일한 수치값을 적용하되 padding에는 auto값이 없다.

padding은 box-sizing이라는 별도의 기능을 사용할 수 있다. 수치가 벗어나는 것을 잡아주는 기능이다.

div { box-sizing: border-box; }

padding 속성의 혼합

p.a { padding: 30px 0; }
p.b { padding: 20px 0; }

동시에 패딩 값이 적용될 경우 합산되어 50px가 적용된다.