CSS에서 패딩을 어떻게 생성합니까?

CSS 패딩을 사용하면 HTML 코더가 HTML 요소 외부에서 기본 패딩 또는 데드 스페이스를 설정할 수 있습니다. 이를 수행하는 이점은 코더가 해당 요소의 각 인스턴스에 대한 패딩 코드를 반복하는 것을 절약하고 페이지에서 일관성을 더 쉽게 생성한다는 것입니다. 패딩 할 HTML 요소는 단락, 테이블 또는 제목과 같은 여러 가지 일 수 있습니다.

CSS에서 패딩을 만들려면 먼저 패드하려는 HTML 요소를 식별해야합니다. 패드하려는이 요소는 선택기라고합니다. 그런 다음 적절한 패딩 값을 지정하려고합니다. CSS에는 5 가지 유형의 패딩 특성이 있습니다. 한 번에 요소의 네면 모두에 대해, 요소의 각각의 개별면에 대해 4 개의 다른 측면 (예 : 왼쪽, 오른쪽, 상단 또는 하단)이 있습니다. 프로그래머가 한 번에 HTML 요소의 4면 모두에 대한 값을 지정하도록 허용하는 속성을 속성 이라고합니다.

CSS 패딩의 하나의 선언을 지정하는 데 사용되는 코딩 언어는 단순히 "패딩"이라는 단어입니다. 이 라벨을 따라, 패딩의 관련 "값"또는 원하는 공간의 양에 대한 정보는 일반적으로 픽셀 또는 백분율로 표시됩니다. 패딩과 값은 곱슬 버팀대 또는 곱슬 괄호 안에 쓰여집니다 (예 : "{"및 "}"). 그 앞에는 채워질 HTML 요소 (예 : 단락의 경우 "p"또는 레벨 2 헤더의 경우 "H2")가 있습니다.

값이 표현되는 방식의 관점에서 값은 픽셀 (예 : 1px 또는 5px), 점 (예 : 1pt 또는 5pt) 또는 인치 (예 : 1in 또는 5in) 또는 센티미터 (예 : 1cm 또는 5cm)로 표시 될 수 있습니다. 값은 HTML 요소의 백분율로 선언 될 수 있습니다. 예를 들어 값이 50%인 경우 패딩은 요소 크기의 절반과 같습니다.

다음 예제는 HTML Elemen을 패딩하기위한 HTML 코드입니다.t 값에 의해 각각 백분율과 길이로 반영됩니다. 하나의 값만 할당하면 웹 브라우저는이 패딩을 HTML 요소의 네면 모두에 할당합니다.

패딩 : 10%;
패딩 : 100px;

위의 패딩 선언 유형에 더 많은 값을 추가하면 웹 브라우저가 특정 방식으로 해석됩니다. 두 값이 할당되면 첫 번째 값은 상단과 하단에 해당하고 두 번째는 왼쪽과 오른쪽에 해당합니다. 세 가지 값은 첫 번째 값이 상단을, 두 번째는 왼쪽과 오른쪽에, 세 번째는 HTML 요소의 하단을 참조하게됩니다. 최대 4 개의 값을 할당하면 첫 번째, 두 번째, 세 번째 및 네 번째 값이 해당 순서대로 상단, 오른쪽, 하단 및 왼쪽에 해당합니다. 둘 이상의 값이 제공되면 공간으로 분리되고 세미콜론으로 끝나야합니다.

패딩 : 10px 20px 10px 20px;

CSS의 패딩은 한쪽으로 수행 할 수 있습니다시간도 마찬가지입니다. 이와 관련하여 4 개의 패딩 특성이 더 있습니다. 이들은 패딩 탑, 패딩 오른쪽, 패딩 바닥 및 패딩 왼쪽입니다. 보다 정확한 방식으로 CSS로 패딩을 만들려면 위와 같은 속기 선언과 동일한 구문의 속성을 레이블을 지정해야합니다. 이러한 패딩 특성 각각은 길이 또는 백분율의 값만 한 값 만 취합니다. 예를 들면 :

패딩-탑 : 10px;
패딩-오른쪽 : 20px;
패딩-바닥 : 10px;
왼쪽 패딩 : 20px;

다음 코드는 웹 페이지를 생성하고 스타일 태그 사이의 패딩 속성을 선언 한 다음 P 태그로 지정된 단락 요소에 사용합니다. / *와 */사이의 텍스트는 사용 된 패딩 유형을 설명하는 메모입니다. CSS 패딩 코드에는 포함되지 않습니다.

<헤드>
<스타일 유형 = "텍스트/CSS">
P.example1 {패딩 : 10px;} /* 4면 모두에 대한 짧은 핸드 패딩* /
P.example2 {패딩 : 50px 30px;} /* Short-Hand Paddi상단과 하단에 NG 뒤에 왼쪽과 오른쪽 */
P.example3 {
패딩 탑 : 10px;
패딩-바닥 : 20px;
패딩-바닥 : 10px;
왼쪽 패딩 : 20px;
} /* 개별 패딩. */

이 텍스트는 양쪽에 동일한 패딩이 있습니다. 양쪽의 패딩은 10px입니다.

이 텍스트는 상단 및 하단 패딩이 50px이고 왼쪽 및 오른쪽 패딩은 30px입니다.

이 텍스트는 10px의 상단 패딩, 오른쪽 패딩 20px, 10px의 하단 패딩 및 20px의 왼쪽 패딩이 있습니다.

위의 예에서 "example1"등은 클래스에 지정된 이름이며, 그 후 단락에서 참조됩니다. 코드 시작시 P 태그와 클래스 이름 사이의 기간은 단락에 할당 된 클래스의 선언을 나타냅니다. 클래스 선언 후 버팀대를 확인하십시오패딩 속성 값 할당을 둘러싸는 ation.

이것은 많은 작업처럼 보일지 모르지만 각 개별 단락에 패딩을 지정하는 것보다 훨씬 덜 노동 집약적입니다. 위의 예제에서는 PAG 인 경우 원하는 요소에 대해 하나의 패딩 속성을 선언 한 다음 페이지의 본문 태그 사이의 요소를 사용할 때 클래스를 참조 할 수 있습니다. 모든 단락에 한 가지 유형의 패딩 만 필요하면 클래스를 전혀 사용할 필요가 없습니다. 스타일 태그 사이의 다음 코드를 사용한 다음 클래스를 지정하지 않고 단락을 코딩하십시오. 이 코드는 위의 예에서 코드 대신 본문 태그 사이에 있습니다.

p {패딩 : 10px 20px 10px 20px;}

이 CSS 패딩이 만들어 낼 수있는 클래스가 지정되지 않더라도 모든 단락에 영향을 미칩니다.