본문 바로가기
Publishing/CSS3

CSS Margins

by 오다다의 이상한 코드 odada 2020. 2. 25.

CSS Margins

margin속성은 정의 된 경계 외부에서 요소 주위에 공간을 만드는 데 사용됩니다.

CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각 측면에 대한 여백을 설정하는 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽).

 

p {
	margin: 70px
}

이 요소의 여백은 70px입니다.

 

CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다.

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

모든 여백 속성은 다음 값을 가질 수 있습니다.

  • auto-브라우저가 마진을 계산합니다
  • length -px, pt, cm 등의 여백을 지정합니다.
  • % -포함 요소 너비의 여백을 %로 지정합니다
  • inherit-마진이 부모 요소에서 상속되도록 지정합니다
팁 : 음수 값이 허용됩니다.

 

여백-속기 속성

코드를 줄이려면 한 속성에 모든 여백 속성을 지정할 수 있습니다.

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

 

아래의 경우 margin속성은 세 가지 값을가집니다 :

  • 여백 : 25px 50px 75px;
    • 상단 여백은 25px입니다
    • 좌우 여백은 50px입니다
    • 아래쪽 여백은 75px입니다
p {
  margin: 25px 50px 75px;
}

 

아래의 경우 margin속성은 두 값이있다 :

  • 여백 : 25px 50px;
    • 위쪽과 아래쪽 여백은 25px입니다
    • 좌우 여백은 50px입니다
p {
  margin: 25px 50px;
}

 

아래의 경우 margin속성은 하나 개의 값을 가지고 :

  • 여백 : 25px;
    • 네 마진은 모두 25px입니다
p {
  margin: 25px;
}

 

auto

auto컨테이너 내에서 요소를 가로로 가운데로 배치 하도록 margin 속성을 설정할 수 있습니다 .

그러면 요소가 지정된 너비를 차지하고 남은 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

 

상속 가치

이 예에서는 <p class = "ex1"> 요소의 왼쪽 여백을 부모 요소 (<div>)에서 상속합니다.

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

'Publishing > CSS3' 카테고리의 다른 글

CSS Box Model  (0) 2020.02.25
CSS Padding  (0) 2020.02.25
CSS Margins  (0) 2020.02.25
CSS width/height  (0) 2020.02.24
CSS Rounded Borders  (0) 2020.02.24
CSS Border  (0) 2020.02.24

댓글0