CSS
여백

통사론

• margin : <위쪽 & 오른쪽 & 아래 & 왼쪽> ;
• margin : <top> , <left & right> , <bottom> ;
• margin : <top & bottom> , <left & right> ;
• 여백 : <top> , <right> , <bottom> , <left> ;
• margin-top : <top> ;
• margin-right : <right> ;
• margin-bottom : <bottom> ;
• margin-left : <왼쪽> ;

매개 변수

비고

주어진 측면에 여백을 적용하십시오.

방향 별 속성

CSS를 사용하면 여백을 적용 할 특정면을 지정할 수 있습니다. 이 목적을 위해 제공된 네 가지 속성은 다음과 같습니다.

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

다음 코드는 선택된 div의 왼쪽에 30 픽셀의 여백을 적용합니다. 결과보기

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

속기 속성을 사용하여 방향 지정

표준 margin 속성을 확장하여 선택한 요소의 각면에 다른 너비를 지정할 수 있습니다. 이 작업을 수행하는 구문은 다음과 같습니다.

margin: <top> <right> <bottom> <left>;

다음 예제에서는 div 상단에 제로 너비 여백을 적용하고 오른쪽에는 10 픽셀 여백, 왼쪽에는 50 픽셀 여백, 왼쪽에는 100 픽셀 여백을 적용합니다. 결과보기

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

마진 축소

두 개의 여백이 서로 수직으로 접촉하면 붕괴됩니다. 두 마진이 수평으로 닿으면 붕괴되지 않습니다.

인접 수직 마진의 예 :

다음 스타일과 마크 업을 고려하십시오.

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

세로 여백이 서로 겹쳐지기 때문에 10px 떨어져 있습니다. 간격은 두 여백의 합계가 아닙니다.

인접한 수평 여백의 예 :

다음 스타일과 마크 업을 고려하십시오.

span{
    margin: 10px;
}

<span>some</span><span>content</span>

가로 여백이 서로 겹치지 않으므로 20px 떨어져 있습니다. 간격은 두 여백의 합입니다.

다양한 크기로 겹침

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

이러한 요소는 세로로 15 픽셀 씩 떨어져 있습니다. 여백은 최대한 많이 겹치지 만 여백이 클수록 요소 사이의 간격이 결정됩니다.

겹쳐지는 여백

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

두 텍스트 사이의 간격은 어떻게됩니까? (대답을보기 위해 마우스를 가져 간다)

간격은 25 픽셀입니다. 4 개의 마진이 모두 서로 닿아 있기 때문에 붕괴되어 4 개의 마진 중 가장 큰 마진을 사용합니다.

위의 마크 업에 테두리를 추가하면 어떨까요?

div{
    border: 1px solid red;
}

두 텍스트 사이의 간격은 어떻게됩니까? (대답을보기 위해 마우스를 가져 간다)

간격은 59px입니다! 이제 외장 및 외 바닥의 여백 만이 서로 닿아 유일하게 붕괴 된 여백입니다. 나머지 여백은 테두리로 구분됩니다. 그래서 우리는 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (1 픽셀은 테두리입니다 ...)

부모 요소와 자식 요소 간의 여백 축소 :

HTML :

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

위의 예에서 가장 큰 마진 만 적용됩니다. 단락이 h1에서 60px 위치에있을 것으로 예상했을 수 있습니다 (div 요소의 여백 - 상단이 40px이고 p의 최대 여백이 20px이므로). 마진이 함께 붕괴되어 한 마진을 형성하기 때문에 이런 일이 발생하지 않습니다.

여백을 사용하여 페이지의 요소를 가로로 가운데 맞춤

요소가 블록 이고 명시 적으로 설정된 너비 값 이있는 한 여백을 사용하여 페이지의 블록 요소를 수평으로 가운데에 배치 할 수 있습니다.

윈도우의 너비보다 낮은 너비 값을 추가하고 margin의 auto 속성은 나머지 공간을 왼쪽과 오른쪽으로 분배합니다.

#myDiv {
 width:80%;
 margin:0 auto;
}

위 예제에서 우리는 shorthand margin 선언을 사용하여 처음에는 0 을 위쪽 및 아래쪽 여백 값으로 설정하고 (이 값은 임의의 값이 될 수 있음) 브라우저가 왼쪽 및 오른쪽 여백 값에 자동으로 공간을 할당하도록 auto 를 사용합니다.

위의 예에서 #myDiv 요소는 너비가 80 %로 설정되어 남은 부분은 20 % 남았습니다. 브라우저는이 값을 나머지면에 분배합니다.

(100 % - 80 %) / 2 = 10 %

마진 속성 단순화

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

또 다른 exapmle :

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

음수 여백

여백은 음수 값으로 설정할 수있는 몇 가지 CSS 속성 중 하나입니다. 이 속성은 절대 위치 지정없이 요소 를 겹치는 데 사용할 수 있습니다.

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

예제 1 :

margin-left 와 margin-right 대한 margin의 백분율 값은 그것의 parent 요소에 비례한다고 가정하는 것은 명백하다.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

그러나 margin-top 과 margin-bottom 이 언제 margin-bottom 있는지에 대한 것은 아닙니다. 이 두 속성은 백분율로 부모 컨테이너의 높이가 아니라 부모 컨테이너의 너비 와 관련이 있습니다.

그래서,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}