CSS에서 패딩을 어떻게 생성합니까?
CSS 패딩을 사용하면 HTML 코더가 HTML 요소 외부에서 기본 패딩 또는 데드 스페이스를 설정할 수 있습니다.이를 수행하는 이점은 코더가 해당 요소의 각 인스턴스에 대한 패딩 코드를 반복하는 것을 절약하고 페이지에서 일관성을 더 쉽게 생성한다는 것입니다.패딩 할 HTML 요소는 단락, 테이블 또는 제목과 같은 여러 가지가 될 수 있습니다. css에서 패딩을 만들려면 먼저 패드하려는 HTML 요소를 식별해야합니다.패드하려는이 요소는 선택기라고합니다.그런 다음 적절한 패딩 값을 지정하려고합니다.CSS MDASH에는 5 가지 유형의 패딩 특성이 있습니다.하나는 한 번에 요소의 네면 모두에 대해, 요소의 각각의 개별면에 대해 하나 (예 : 왼쪽, 오른쪽, 상단 또는 하단).프로그래머가 한 번에 HTML 요소의 4면 모두에 대한 값을 지정하도록 허용하는 속성을 한 번에 속성
라고합니다.css 패딩의 하나의 선언을 지정하는 데 사용되는 코딩 언어는 단순히“패딩”이라는 단어입니다.이 라벨을 따라, 패딩의 관련 값 또는 원하는 공간의 양에 대한 정보는 일반적으로 픽셀 또는 백분율로 표시됩니다.패딩과 값은 곱슬 버팀대 또는 곱슬 괄호 안에 기록됩니다 (예 : {및}).이 모든 것은 패딩 될 HTML 요소 (예 : 단락의 경우 P 또는 레벨 2 헤더의 경우 H2)입니다., 점 (예 : 1pt 또는 5pt) 또는 인치 (예 : 1in 또는 5in) 또는 센티미터 (예 : 1cm 또는 5cm).값은 HTML 요소의 백분율로 선언 될 수 있습니다.예를 들어 값이 50%인 경우 패딩은 요소 크기의 절반과 동일합니다.하나의 값만 할당하면 웹 브라우저는이 패딩을 HTML 요소의 네면 모두에 할당합니다.
패딩 : 10%; 패딩 : 100px;
위의 패딩 선언 유형에 더 많은 값을 추가하면 웹 브라우저가 특정 방식으로 해석됩니다.두 값이 할당되면 첫 번째 값은 상단과 하단에 해당하고 두 번째는 왼쪽과 오른쪽에 해당합니다.세 가지 값은 첫 번째 값이 상단을, 두 번째는 왼쪽과 오른쪽에, 세 번째는 HTML 요소의 하단을 참조하게됩니다.최대 4 개의 값을 할당하면 첫 번째, 두 번째, 세 번째 및 네 번째 값이 해당 순서대로 상단, 오른쪽, 하단 및 왼쪽에 해당합니다.둘 이상의 값이 제공되면 공간으로 분리되고 세미콜론으로 끝나야합니다 (예 :
패딩 : 10px 20px 10px 20px; CSS의 패딩도 한 번에 한쪽에 한쪽으로 수행 할 수 있습니다.이와 관련하여 4 개의 패딩 특성이 더 있습니다.이들은 패딩 탑, 패딩 오른쪽, 패딩 바닥 및 패딩 왼쪽입니다.보다 정확한 방식으로 CSS로 패딩을 만들려면 위와 같은 속기 선언과 동일한 구문의 속성을 레이블을 지정해야합니다.이러한 패딩 특성 각각은 길이 또는 백분율의 값만 한 값 만 취합니다.예를 들면 : ding 패딩-탑 : 10px;
패딩-오른쪽 : 20px;패딩-바닥 : 10px;
패딩 왼쪽 : 20px;그런 다음 p 태그로 지정된 단락 요소에서 사용합니다./ *와 */사이의 텍스트는 사용 된 패딩 유형을 설명하는 메모이며 CSS 패딩 코드에 포함되지 않습니다. p.example1 {패딩 : 10px;} /* 4면 모두에 대한 짧은 핸드 패딩* /
p.example2 {패딩 : 50px 30px;} /* 상단과 하단의 짧은 핸드 패딩 다음 왼쪽.그리고 오른쪽 * /
p.example3 {
Padding-top : 10px;
Padding-Bottom : 20px;
Padding-Bottom : 10px;
Padding-left : 20px;
} / * 개별 패딩.*/
lt;/style gt;
lt;/head gt;
lt; body gt;
lt; p class ' example1 gt;이 텍스트는 양쪽에 동일한 패딩이 있습니다.양쪽의 패딩은 10px.'”example 3” gt;이 텍스트는 10px의 상단 패딩, 20px의 오른쪽 패딩, 10px의 바닥 패딩 및 20px. lt;/p gt;
lt;/body gt;;, 위의 예에서 "예제"등은 클래스에 지정된 이름이며, 그 후 단락에서 참조됩니다.코드 시작시 P 태그와 클래스 이름 사이의 기간은 단락에 할당 된 클래스의 선언을 나타냅니다.패딩 속성 값 할당을 동봉하는 클래스 선언 후에 버팀대에 주목하십시오.this 이것은 많은 작업처럼 보일지 모르지만 각 개별 단락에 패딩을 지정하는 것보다 훨씬 덜 노동 집약적입니다.위의 예제에서는 PAG 인 경우 원하는 요소에 대해 하나의 패딩 속성을 선언 한 다음 페이지의 본문 태그 사이의 요소를 사용할 때 클래스를 참조 할 수 있습니다.모든 단락에 한 가지 유형의 패딩 만 필요하면 클래스를 전혀 사용할 필요가 없습니다.스타일 태그 사이의 다음 코드를 사용한 다음 클래스를 지정하지 않고 단락을 코딩하십시오.이 코드는 위의 예제에서 코드 대신 본문 태그 사이에 이동합니다.
p {패딩 : 10px 20px 10px 20px;}