CSS 여백

태그가 있습니다. .

태그에는 box 클래스 이름이 있습니다. , 이는 box의 스타일을 의미합니다. CSS 파일의

요소에 적용됩니다.

태그에는 상단 여백 50픽셀, 왼쪽 여백 30픽셀, 오른쪽 여백 40픽셀, 하단 여백 40픽셀이 할당되었습니다. 또한

태그에 1px 너비의 단색 빨간색 테두리를 지정했습니다. 위의 이미지에서 볼 수 있듯이 여백은

상자의 테두리와 파란색 상자 사이에 간격을 만들었습니다. 여백이 없었다면 이 상자들이 더 가까워졌을 것입니다.

CSS 여백 속기

위의 예에서 네 줄의 코드를 사용하여 상자에 적용하려는 여백을 지정했습니다. margin 속성을 사용하여 코드를 더 효율적으로 만들 수 있습니다.

margin 속성은 앞에서 논의한 4개의 하위 속성을 줄인 것입니다. 이 속성을 사용하면 여러 줄 대신 한 줄의 코드에서 상자의 여백을 지정할 수 있습니다.

여백 약기에 사용하는 구문은 지정하는 값의 수에 따라 다릅니다. 지정할 수 있는 최소 값 수는 1이고 최대 값은 4입니다. 모든 잠재적 사용 사례에서 margin 속기 속성을 사용하는 방법의 예를 분석해 보겠습니다.

네 가지 가치

개별 여백 하위 속성을 사용하여 4개의 다른 여백 값이 있는 상자를 만드는 대신 여백 약식 속성을 사용하고 4개의 값을 지정할 수 있습니다.

margin 속성으로 4개의 값을 지정하면 여백이 나타나는 순서는 다음과 같습니다.

• 첫 번째 값은 상단 여백입니다.
• 두 번째 값은 오른쪽 여백입니다.
• 세 번째 값은 하단 여백입니다.
• 네 번째 값은 왼쪽 여백입니다.

상단 여백이 25px, 오른쪽 여백이 25px, 하단 여백이 50px, 왼쪽 여백이 60px인 상자를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

box {
	margin: 25px 25px 50px 60px;
border: 1px solid red;
}

코드 반환:

이 예에서는 위에서 지정한 값을 기반으로 각 가장자리에 다른 여백이 있는 내부 상자를 만들었습니다. 우리는 또한 1px 너비의 단색 빨간색 여백으로 내부 상자를 둘러쌌습니다. 또한 이전의 파란색 상자에 대한 코드를 재사용하여 상자에 적용한 여백의 크기를 설명합니다.

세 가지 가치

상하 여백을 다르게 하되 상자의 좌우 여백을 동일하게 하고 싶다면 margin 속성을 이용하여 3개의 값을 지정하면 됩니다.

지정한 세 개의 여백이 상자에 적용되는 순서는 다음과 같습니다.

• 첫 번째 값은 상단 여백입니다.
• 두 번째 값은 요소의 오른쪽 및 왼쪽 여백입니다.
• 세 번째 값은 하단 여백입니다.

상자 위쪽에 50px 여백, 상자 왼쪽과 오른쪽에 25px 여백, 상자 아래쪽에 60px 여백이 있는 상자를 만들고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 이러한 여백이 있는 상자를 만들 수 있습니다.

코드 반환:

이 예에서는 위에서 지정한 값을 기반으로 각 가장자리에 다른 여백이 있는 내부 상자를 만들었습니다. 우리는 또한 1px 너비의 단색 빨간색 여백으로 내부 상자를 둘러쌌습니다. 또한 이전의 파란색 상자에 대한 코드를 재사용하여 상자에 적용한 여백의 크기를 설명합니다.

세 가지 가치

상하 여백을 다르게 하되 상자의 좌우 여백을 동일하게 하고 싶다면 margin 속성을 이용하여 3개의 값을 지정하면 됩니다.

지정한 세 개의 여백이 상자에 적용되는 순서는 다음과 같습니다.

• 첫 번째 값은 상단 여백입니다.
• 두 번째 값은 요소의 오른쪽 및 왼쪽 여백입니다.
• 세 번째 값은 하단 여백입니다.

상자 위쪽에 50px 여백, 상자 왼쪽과 오른쪽에 25px 여백, 상자 아래쪽에 60px 여백이 있는 상자를 만들고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 이러한 여백이 있는 상자를 만들 수 있습니다.

.box {
	margin: 50px 25px 60px;
border: 1px solid red;
}

코드 반환:

보시다시피 내부 상자의 왼쪽과 오른쪽에는 동일한 여백 값(25px)이 있고 위쪽과 아래쪽에는 고유한 여백(각각 50px 및 60px)이 있습니다.

코드에서 여백이 적용되는 위치를 설명하기 위해 내부 상자 주위에 빨간색 테두리도 정의했습니다. 또한 첫 번째 예제의 코드를 재사용하여 내부 상자 주위에 여백이 만든 간격을 보여주는 파란색 상자를 만듭니다.

두 가지 가치

상자의 위쪽과 아래쪽에 동일한 여백 값을 지정하고 상자의 오른쪽과 왼쪽에 다른 값을 지정하려면 margin 속성을 사용하여 두 개의 값을 지정할 수 있습니다.

지정한 값이 요소에 적용되는 순서는 다음과 같습니다.

• 첫 번째 값은 상자 상단과 하단의 여백입니다.
• 두 번째 값은 상자의 오른쪽과 왼쪽 여백입니다.

50px 세로 여백과 30px 가로 여백이 있는 상자를 만들고 싶다고 가정해 보겠습니다. 다음 CSS 스타일을 사용하여 이 상자를 만들 수 있습니다.

.box {
	margin: 50px 30px;
border: 1px solid red;
}

코드 반환:

상자의 상단과 하단에는 50픽셀의 여백이 있고 왼쪽과 오른쪽에는 모두 30픽셀의 여백이 있습니다.

코드에서 여백의 크기를 표시하기 위해 내부 상자 주위에 빨간색 테두리도 지정했습니다. 또한 이전 예제의 코드를 재사용하여 내부 상자와 외부 상자 사이에 여백이 만드는 공간을 보여주는 파란색 상자를 만듭니다.

하나의 가치

상자의 모든 면이 동일한 여백을 갖도록 하려면 margin 속성을 사용할 때 하나의 값만 지정하면 됩니다. 지정한 값은 상자의 모든 테두리 주위에 설정된 여백이 됩니다.

모든 테두리 주위에 50px 단일 여백이 있는 상자를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

.box {
	margin: 50px;
	border: 1px solid red;
}

코드 반환:

상자의 모든 테두리에는 50픽셀의 여백이 있습니다. 상자 주위에 빨간색 테두리를 지정하여 여백이 상자 테두리 외부에 적용되었음을 보여주고, 여백을 더 잘 설명하기 위해 빨간색 상자가 배치된 파란색 상자도 만들었습니다.

마진 상속

상속 값은 부모 요소에서 여백을 상속하는 데 사용됩니다.

내부 상자의 여백을 외부 상자의 여백과 동일하게 설정하려면 상속 값을 사용할 수 있습니다. 상속 값은 부모 요소의 여백을 변경하면 자식 요소의 여백(부모 요소 내의 상자)이 자동으로 조정되기 때문에 유용합니다.

부모 요소의 왼쪽 여백이 50px인 상자를 디자인한다고 가정합니다. 우리는 부모 요소에 포함된 상자가 동일한 여백 값을 갖기를 원합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

코드 반환:

외부 상자(파란색 테두리가 있는 상자)의 왼쪽 여백은 50px입니다. 또한 내부 상자(빨간색 테두리가 있는 상자)에는 상위 요소에서 상속된 50px의 왼쪽 여백이 있습니다.

마진 자동

auto 값은 컨테이너 내에서 요소를 수평으로 가운데에 맞추는 데 사용됩니다.

auto 값은 정의한 값에 따라 내부 요소가 특정 너비를 차지하도록 하고 나머지 공간은 왼쪽과 오른쪽 여백으로 나뉩니다.

너비가 500px인 상자 안에 너비가 250px인 상자를 만들었다고 가정해 보겠습니다. auto 키워드를 사용하여 여백을 만든 경우 상자의 왼쪽과 오른쪽 모두에 125px 여백이 적용됩니다. 다음 공식을 사용하여 이를 계산했습니다.

(Outer Box Width - Inner Box Width) / 2

이 경우 다음 합계를 사용하여 자동 생성된 마진의 측면을 계산했습니다.

(500 - 250) / 2

이 문제에 대한 답은 125이며, 이는 상자의 왼쪽 및 오른쪽 여백 모두에 적용되는 여백 값입니다. 다음은 이러한 치수를 사용하는 상자의 예입니다.

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

코드 반환:

보시다시피 내부 상자(빨간색 테두리가 있는 상자)의 왼쪽과 오른쪽에 동일한 여백이 만들어졌습니다. 즉, 내부 상자는 수평 중앙에 있습니다. 이것은 margin:auto 값을 사용하여 내부 상자의 여백을 지정하기 때문입니다.

내부 상자에는 위 또는 아래 가장자리에 여백이 없습니다. 이 예에서는 여백을 지정하지 않았기 때문입니다.

결론

CSS 여백 속성은 웹 페이지에서 요소의 테두리와 다른 요소 사이에 공백을 만드는 데 사용됩니다.

예제를 참조하여 이 자습서에서는 CSS margin 속성을 사용하는 방법과 웹 페이지에서 요소의 테두리와 다른 요소 사이에 공간을 만드는 네 가지 하위 속성을 사용하는 방법에 대해 설명했습니다. 이제 전문가처럼 CSS 여백 속성을 사용하는 데 필요한 도구를 갖추었습니다!