CSS에서 여백 및 패딩 사용

1. CSS에서 여백 도입
2. CSS에서 패딩 소개

여백과 패딩은 CSS에서 비슷해 보이지만 다릅니다. 이 튜토리얼에서는 CSS에서 여백과 패딩을 소개합니다. 그런 다음 우리는 그들 사이의 차이점을 알고 여백과 패딩을 사용하는 경우를 배웁니다.

CSS에서 여백 도입

CSS에서 여백은 인접한 두 요소 사이의 공간입니다. 인접한 두 요소의 경계 사이의 공간입니다. 요소의 여백은 요소 내부의 공간을 제어하지 않습니다. 오히려 요소 바로 외부의 공간을 담당합니다. margin 속성을 사용하여 요소의 네 면 모두의 여백을 지정합니다. margin 속성에 4개의 값을 씁니다. 값은 margin-top, margin-right, margin-bottom 및 margin-left를 순서대로 나타냅니다. 우리는 다음과 같이 설명할 수 있습니다.

element {
margin: 20px 20px 20px 20px;
}

위의 코드는 4면 모두에서 요소의 20px 여백을 설정합니다.

세 가지 값만 사용할 때 중간 값은 margin-left 및 margin-right 속성을 나타냅니다. margin 속성에 두 개의 값만 있는 경우 첫 번째 값은 위쪽과 아래쪽의 여백을 나타내고 두 번째 값은 왼쪽과 오른쪽의 여백을 나타냅니다. 단일 여백 값은 네 면 모두의 여백을 나타냅니다.

이제 마진이 무엇인지 보여드리겠습니다. 예를 들어 redbox와 bluebox를 클래스로 사용하여 두 개의 div를 만듭니다. 각 클래스에 200px의 height와 width를 지정합니다. 상자의 background-color를 red 및 blue로 설정합니다. 그런 다음 상단 상자인 redbox의 margin-bottom 속성을 20px로 설정합니다.

아래 예에서는 빨간색과 파란색의 두 상자를 만듭니다. margin-bottom 속성은 빨간색 상자의 경계에서 하단 방향으로 20px의 공간을 제공합니다. 이는 파란색 상자가 빨간색 상자에서 20px 거리에 있음을 의미합니다. margin-bottom 속성을 제거하면 공간이 제거되고 두 상자가 스스로 부착됩니다. 두 상자의 텍스트는 왼쪽과 위쪽에 공백 없이 상자의 테두리에 첨부됩니다.

예제 코드:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

웹 페이지에서 요소의 위치를 ​​변경하려는 경우 CSS 여백을 사용할 수 있습니다. margin 속성을 사용하여 요소를 왼쪽, 오른쪽, 위쪽, 아래쪽으로 이동할 수 있습니다. 여백의 또 다른 사용은 인접한 두 요소 사이의 거리를 지정해야 할 때 옵니다. 위의 예에서 설명했습니다. 요소에 음수 여백 값을 사용하여 겹치는 효과를 만들 수도 있습니다. 다음은 CSS 여백의 일부 사용 사례입니다.

CSS에서 패딩 소개

패딩은 요소의 콘텐츠와 요소의 경계 사이의 공간입니다. 요소 내부의 공간이며 요소 외부 영역을 제어할 수 없습니다. padding 속성을 사용하여 요소의 패딩을 설정합니다. 4개의 값, 3개의 값, 2개의 값 및 단일 값을 사용하여 요소의 패딩을 나타낼 수 있습니다. 패딩 표현은 방향 측면에서 여백 표현과 유사합니다. 우리는 다음과 같이 설명할 수 있습니다.

margin: 20px 20px 20px 20px;

위의 코드는 20px의 패딩을 모든 방향으로 설정합니다.

이제 예제를 통해 CSS 패딩의 실제 사용을 보여드리겠습니다. 여기서는 위와 동일한 HTML 구조를 사용합니다. CSS에서 div를 선택하고 200px의 높이와 너비를 지정하고 50px의 padding-top을 지정합니다. 개별 클래스를 선택하고 background-color 속성에 대한 해당 값을 지정하십시오.

아래 예에서는 위의 여백 예와 달리 두 개의 상자가 부착되어 있습니다. 그러나 두 상자의 각 텍스트 위에 약간의 공간이 있는 것을 볼 수 있습니다. 이것이 패딩이 하는 일입니다. padding-top 속성을 20px로 설정하면 텍스트에서 상자 상단까지 50px의 공간이 추가되었습니다.

예제 코드:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

CSS 패딩을 사용하여 요소의 내용과 테두리 사이의 공간을 지정할 수 있습니다. 패딩을 사용하여 요소의 크기를 늘릴 수도 있습니다. 패딩 값을 늘리면 콘텐츠와 테두리 사이의 공간이 늘어납니다. 결과적으로 요소의 크기도 증가하여 콘텐츠의 크기를 일정하게 유지합니다.