CSS에서 패딩과 여백을 표현하는 방법

패딩과 여백은 요소 주위의 공백을 제어하는 ​​데 사용되는 CSS의 속성입니다. 내부 여백은 padding 속성을 통해 설정된 요소 콘텐츠와 요소 테두리 사이의 공간을 설정하고, 외부 여백은 margin 속성을 통해 설정된 요소 테두리와 인접 요소 사이의 공간을 설정합니다.

CSS의 패딩과 여백

패딩과 여백은 요소 주위에 공백을 설정하는 데 사용되는 CSS의 속성입니다. 이는 요소의 레이아웃과 사용자 인터페이스 디자인을 정의하는 데 중요한 역할을 합니다.

Padding

패딩은 요소의 내용과 요소의 테두리 사이의 공간을 말합니다. padding 속성을 ​​통해 설정할 수 있으며, 해당 값은 단일 값(모든 여백에 대해 동일한 거리를 나타냄) 또는 4개 값(상단, 오른쪽, 하단 및 왼쪽 여백을 나타냄)일 수 있습니다. 각각의 거리). padding 属性来设置，其值可以是单个值（表示所有边距的相同距离）或四个值（分别表示上、右、下、左的边距距离）。

语法：

<code>padding: <top> <right> <bottom> <left>;</code>

示例：

<code>div {
  padding: 10px;
}</code>

此示例将为 div 元素设置 10 像素的内边距，即元素内容在各条边距上都与元素边框保持 10 像素的距离。

外边距

外边距是指元素边框与相邻元素（或视口）之间的空间。它可以通过 margin

구문: ​​

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

예:

<code>div {
  margin: 20px;
}</code>

이 예는 div 요소에 대해 10픽셀의 패딩을 설정합니다. 즉, 요소의 콘텐츠는 모든 여백의 요소 테두리에서 10픽셀 떨어져 있습니다. .

🎜여백🎜🎜🎜여백은 요소의 테두리와 인접한 요소(또는 뷰포트) 사이의 공간입니다. margin 속성을 ​​통해 설정할 수 있으며 해당 값은 패딩과 유사한 규칙을 따릅니다. 🎜🎜🎜구문:🎜🎜rrreee🎜🎜예:🎜🎜rrreee🎜이 예에서는 div 요소에 대해 20픽셀의 여백을 설정합니다. 즉, 요소 ​​테두리는 각 여백의 인접한 요소에서 20픽셀 떨어져 있습니다. 🎜

위 내용은 CSS에서 패딩과 여백을 표현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!