CSS Margins

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;
}