이 게시물은 다음을 설명합니다.
CSS에서 '패딩'과 '여백'을 언제 활용합니까?
CSS ' 여유 ' 그리고 ' 심 ” 속성은 인터페이스를 디자인하는 데 사용됩니다. 또한 요소 사이의 추가 간격 또는 공간을 지정하는 데 사용됩니다. 그러나 이 두 속성은 기능 면에서 서로 다릅니다.
여기서는 두 속성 간의 몇 가지 차이점을 설명합니다.
| 여유 | 심 |
|---|---|
| 여백은 요소 외부의 공간을 제공합니다. | 패딩은 요소의 내용 내부에 공간을 제공합니다. |
| 요소 마진을 ' 자동 ” 요소 주변의 여백을 자동으로 설정합니다. | 패딩은 자동으로 설정할 수 없습니다. 사용자는 요소 내부의 공백을 설정하기 위해 값을 지정해야 합니다. |
| 여백은 요소의 스타일에 영향을 주지 않습니다. | 요소에 배경색을 적용하면 요소의 스타일에 영향을 미칩니다. |
| 여백으로 양수 값과 음수 값을 설정할 수 있습니다. | 패딩은 양수 값만 지원합니다. |
CSS에서 '여백'을 활용하는 방법?
'를 활용하려면 여유 ” 속성, 먼저 “ <사업부> ” 컨테이너를 선택하고 클래스를 할당합니다. 예를 들어 '라는 이름의 클래스를 할당했습니다. 리눅스 '. 그런 다음 단락 태그 '에 일부 텍스트를 삽입합니다. ”:
< 사업부 수업 = '리눅스' >
< 피 > Linuxhint는 최고의 튜토리얼 웹사이트 중 하나입니다. < / 피 >
< / 사업부 >
위에서 언급한 코드의 결과는 다음과 같습니다.
이제 다른 ' <사업부> ” 클래스가 있는 컨테이너 여백-div '를 적용하고 ' 스타일 ” 속성을 “ 테두리:1px 솔리드 블랙 '. 그런 다음 '에 텍스트를 추가하십시오. ” 태그:
< 사업부 수업 = '마진-div' 스타일 = '테두리:1px 솔리드 블랙' >
< 피 >Linuxhint는 최고의 튜토리얼 웹사이트 중 하나입니다.< br >
< / 피 >
< 사업부 >
산출
이제 '.margin-div' 클래스에 'margin' 속성을 적용합니다.
.margin-div {배경- 색상 : RGB ( 199 , 238 , 205 ) ;
폰트- 크기 : 중간;
국경 : 3px RGB ( 114 , 250 , 114 ) ;
여백: 100px 100px 100px 100px;
}
위의 코드에서 ' .margin-div ”는 div 요소에 액세스하여 아래 나열된 속성을 적용하는 데 사용됩니다.
- “ 배경색 ” 속성은 배경에 색상을 적용하는 데 사용됩니다.
- “ 글꼴 크기 ”는 글꼴 크기를 조정하는 데 활용됩니다.
- “ 여유 ” 요소 외부에 공간을 할당합니다. 예를 들어 '여백' 속성을 ' 100픽셀 '.
여기에서 ' 여유 ” 두 번째 속성 “ 사업부 ' 요소:
CSS에서 '패딩'을 활용하는 방법?
'padding' 속성을 사용하기 위해 위에서 언급한 예제를 활용했습니다. 두 번째 ' 사업부 ” 컨테이너, “클래스 사용 패딩-div ” 패딩을 적용하려면:
< 사업부 수업 = '리눅스' >< 피 > Linuxhint는 최고의 튜토리얼 웹사이트 중 하나입니다. < / 피 >
< / 사업부 >
< 사업부 수업 = '패딩-div' 스타일 = '테두리:1px 솔리드 블랙' >
< 피 >Linuxhint는 최고의 튜토리얼 웹사이트 중 하나입니다.< br >
< / 피 >
< / 사업부 >
산출
'에 패딩 및 기타 CSS 속성을 적용하려면 .padding-div ” 클래스에서 제공된 코드를 살펴보십시오.
.padding-div {배경- 색상 : RGB ( 199 , 238 , 205 ) ;
폰트- 크기 : 중간;
패딩: 50px 50px 50px 50px;
}
위에서 언급한 코드에서 두 번째 ' 사업부 ” 클래스를 사용하는 요소 “ .padding-div '. 우리는 'background-color'와 'font-size'를 설정했습니다. 더욱이 “ 심 ” 속성은 각 측면에서 요소 콘텐츠 주위에 공간을 추가하는 데 사용됩니다. 50픽셀 '.
산출
CSS에서 'padding'과 'margin'의 차이점과 용도에 대해 설명했습니다.
결론
CSS ' 여유 '는 요소 주변의 간격을 설정하는 데 사용되며 ' 심 ” 요소 내용 주위에 간격을 추가하는 데 사용됩니다. 여백 또는 패딩 속성을 적용하려면 먼저 ' 사업부 ” 컨테이너를 선택하고 클래스를 지정합니다. 이후 클래스 이름으로 클래스에 접근하여 “ 여유 ' 그리고 ' 심 ' 속성. 이 게시물은 CSS에서 마진과 패딩의 사용에 대해 설명했습니다.