• CSS Margins

CSS margins(여백)속성은 어떤 정의된 테두리 외부의, 요소들의 주위 공간을 만드는데 사용됩니다.
CSS로 여백을 완전히 제어할 수 있습니다. 한 요소의 각각의 측면 (상, 우, 하, 좌)에 대한 여백을 설정하는 속성들이 있습니다.

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

• margin-top
• margin-right
• margin-bottom
• margin-left

모든 여백 속성들을 하기의 값을 가질 수 있습니다.

• auto - 브라우저가 여백을 계산합니다
• length - px, ot, cm 등으로 여백을 지정합니다.
• % - 포함하고 있는 요소의 너비에 대한 백분율로 여백을 지정합니다.
• inherit - 여백을 부모 요소로부터 상속받도록 지정합니다.
  • Tip : 음수 값이 허용됩니다.

<p> 요소의 모든 4개 측면에 대한 다른 여백을 지정합니다.

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

코드를 줄이기 위해, 하나의 속성에서 모든 여백 속성을 지정할 수 있습니다.
margin속성은 다음의 개별 여백 속성들에 대한 shorthand 속성입니다.

• margin-top
• margin-right
• margin-bottom
• margin-left

작동 원리는 다음과 같습니다.
여백 속성에 4개의 값이 있는 경우:

• margin: 25px 50px 75px 100px;
  • top margin: 25px
  • right margin: 50px
  • bottom margin: 75px
  • left margin: 100px

4개의 값을 가진 여백 shorthand 속성을 사용합니다.

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

여백 속성에 3개의 값이 있는 경우:

• margin: 25px 50px 75px;
  • top margin: 25px
  • right and left margin: 50px
  • bottom margin: 75px

3개의 값을 가진 여백 shorthand 속성을 사용합니다.

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

여백 속성에 2개의 값이 있는 경우:

• margin: 25px 25px;
  • top and bottom margins: 25px
  • right and left margins: 50px

2개의 값을 가진 여백 shorthand 속성을 사용합니다.

p {
  margin: 25px 50px;
}

여백 속성에 1개의 값이 있는 경우:

• margin: 25px;
  • 모든 4개의 여백 : 25px

p {
  margin: 25px;
}

margin 속성을 auto로 설정하여 컨테이너 내에서 요소를 가로로 중앙에 배치할 수 있습니다.
그 요소는 지정된 너비를 차지하고, 남은 공간은 좌측, 우측 여백 사이에서 균등하게 배분됩니다.

여백 auto 속성 사용하기

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

하기 예제는 <p class=“ex1”>요소의 왼쪽 여백이 부모 요소 ( <div> )에서 상속받게 합니다.

inherit 값을 사용합니다.

div {
  border: 1px solid red;
  margin-left: 100px;
}
 
p.ex1 {
  margin-left: inherit;
}

때때로 두 개의 여백이 단일 여백으로 축소됩니다.
요소들의 상단 여백과 하단 여백이 때로는 두 개의 여백 중에서 가장 큰 여백과 동일한 단일 여백으로 축소됩니다.
이것은 좌측 여백과 우측 여백에서는 발생하지 않습니다. 오직 상단 여백과 하단 여백에서만 발생합니다.

h1 {
  margin: 0 0 50px 0;
}
 
h2 {
  margin: 20px 0 0 0;
}

• 상기에서 <h1>은 하단 여백 50px를 가지고, <h2>는 상단 여백 20px를 가진다. 상식적으로 h1과 h2 사이에는 세로로 70px의 여백을 있어야 하지만, margin collapse때문에 실제 여백은 50px이다.