drexqq

[CSS] padding(패딩)과 margin(마진) 본문

Front-End/CSS

[CSS] padding(패딩)과 margin(마진)

drexqq 2020. 6. 11. 09:11
728x90
반응형

margin - 박스 요소의 바깥쪽 여백을 설정합니다.

사용법

  • margin-top : 10px; - 요소의 위 바깥쪽 여백을 설정합니다.
  • margin-right : 11px; - 요소의 오른쪽 바깥쪽 여백을 설정합니다.
  • margin-bottom : 12px; - 요소의 아래 바깥쪽 여백을 설정합니다.
  • margin-left : 13px; - 요소의 왼쪽 바깥쪽 여백을 설정합니다.
  • margin : 10px 11px 12px 13px; - 위쪽/오른쪽/아래/왼쪽(시계방향)
  • margin : 10px 11px 12px; - 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px)
  • margin : 10px 11px; - 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px)
  • margin : 10px; - 위쪽,오른쪽,아래,왼쪽(10px)
  • margin : auto; - 자동값, 기본값
  • margin : 0 auto; - 블록구조를 가운데 정렬 할 때 사용

padding - 박스 요소의 안쪽 여백을 설정합니다.

사용법

  • padding-top : 10px; - 요소의 위 안쪽 여백을 설정합니다.
  • padding-right : 11px; - 요소의 오른쪽 안쪽 여백을 설정합니다.
  • padding-bottom : 12px; - 요소의 아래 안쪽 여백을 설정합니다.
  • padding-left : 13px; - 요소의 왼쪽 안쪽 여백을 설정합니다.
  • padding : 10px 11px 12px 13px; - 위쪽/오른쪽/아래/왼쪽(시계방향)
  • padding : 10px 11px 12px; - 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px)
  • padding : 10px 11px; - 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px)
  • padding : 10px; - 위쪽,오른쪽,아래,왼쪽(10px)
  • padding : auto; - 자동값, 기본값
728x90
반응형

'Front-End > CSS' 카테고리의 다른 글

[CSS] background  (0) 2020.06.11
[CSS] box-shadow  (0) 2020.06.11
[CSS] CSS 선언 방법  (0) 2020.06.11
[CSS] CSS의 색상 표현  (0) 2020.06.11
[CSS] CSS의 단위  (0) 2020.06.11
Comments