[웹프로그래밍 ]CSS공부 여백설정하기

CSS 여백설정하기

CSS margin속성은 요소 주위에 공간을 생성하는 데 사용됩니다.

margin속성은 경계 외부의 공백의 크기를 설정합니다.

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

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

margin-top
margin-right
margin-bottom
margin-left
모든 margin 속성은 다음 값을 가질 수 있습니다.

auto - 브라우저가 여백을 계산합니다.
length - px, pt, cm 등의 여백을 지정합니다.
% - 포함하는 요소의 너비에 대한 여백을 %로 지정합니다.
inherit - 부모 요소에서 여백을 상속해야한다고 지정합니다.
팁 : 음수 값이 허용됩니다.

다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 여백을 설정합니다.

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

 

여백 - 속기 속성
코드를 줄이기 위해 하나의 속성에 모든 여백 속성을 지정할 수 있습니다.

이 margin속성은 다음과 같은 개별 여백 속성에 대한  속성입니다.

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

그래서, 그것이 작동하는 방법은 다음과 같습니다 :

margin속성에 4 개의 값 이있는 경우 :

여백 : 25px 50px 75px 100px;
상단 여백은 25px입니다.
오른쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
왼쪽 여백은 100 픽셀입니다.

시작은 위에서 오른쪽 아래 왼쪽으로 진행됩니다.
margin속성에 세 개의 값 이있는 경우 :

여백 : 25px 50px 75px;
상단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
margin속성에 두 개의 값 이있는 경우 :

여백 : 25px 50px;
상단 및 하단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
margin속성에 하나의 값 이있는 경우 :

여백 : 25px;
네 가지 마진 모두 25 픽셀입니다.
자동 가치
margin 속성을 설정하여 auto컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다.

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

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

 

상속 된 값
이 예에서는 부모 요소에서 왼쪽 여백을 상속 할 수 있습니다.

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

p.one {
    margin-left: inherit;
}

여백 축소
요소의 위쪽 및 아래쪽 여백은 두 개의 여백 중에서 가장 큰 것과 동일한 단일 여백으로 축소됩니다.

이것은 왼쪽과 오른쪽 여백에는 발생하지 않습니다! 위쪽 및 아래쪽 여백 만!

다음 예제를보십시오.

예
h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

위의 예에서 <h1> 요소의 하단 여백은 50px입니다. <h2> 요소의 상단 여백은 20px로 설정됩니다.

상식적으로는 <h1>과 <h2> 사이의 수직 여백이 총 70px (50px + 20px)가 될 것입니다. 그러나 마진 붕괴로 인해 실제 마진은 50px가됩니다.