CSS margin & padding

margin & padding

margin(마진) : 두 박스 모델 사이의 여백
padding(패딩) : 한 박스 모델에서 테두리와 내용 사이의 여백

 

margin 속성

요소 주변의 여백을 설정

•  요소와 요소 사이의 간격을 조절한다.
• 4가지 방향에 한번에 똑같이 지정한다.
  OR 특정 방향 지정 : margin 하이픈(-) top, right, bottom, left
• 기본형태 >> margin: <크기> | <백분율> | auto

margin 속성

• <크기> : 너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정한다. ( margin: 50px )
• <백분율>: 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정한다. ( margin: 0.1% )
• auto: display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다.

margin 속성을 사용하여 웹 문서 가운데 정렬

• 웹 문서에서 텍스트 요소를 배치할 때 : text-align 속성 사용한다.
• 웹 문서 전체를 배치 : margin 속성 사용한다.

margin속성을 사용하여 웹 문서 정렬 시

•  배치할 요소의 너빗값 지정
•  margin-left, margin-right의 속성값을 auto로 지정한다.
  : 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동계산한다.

margin 중첩 OR margin 상쇄

• 요소를 배치할 경우 각 요소의 마진과 마진이 서로 만나서 마진값이 큰 쪽이 겹쳐진다.

padding 속성

콘텐츠 영역와 테두리 사이의 여백 설정

• 테두리 안쪽의 여백
• 박스 모델에서 마진과 패딩을 지정하는 방법이 유사
  • 4가지 방향에 한번에 똑같이 지정
    OR 특정 방향 지정 : padding 하이픈(-) top, right, bottom, left