내부 CSS를 사용하여 HTML 문서에 패딩을 추가하려면 아래에 제공된 단계를 따라야 합니다. 이러한 간단한 단계를 사용하여 패딩을 쉽게 추가할 수 있습니다.
1 단계: 먼저, 텍스트 편집기에 Html 코드를 입력하거나 패딩을 추가하려는 텍스트 편집기에서 기존 Html 파일을 열어야 합니다.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
2 단계: 이제 HTML 문서의 title 태그 바로 뒤의 head 태그에 커서를 놓고 다음을 정의해야 합니다. 다음 블록에 표시된 대로 태그를 지정합니다.
Add the Padding in Html
3단계: 이제 패딩을 추가하려는 텍스트 바로 앞에 지정된 id 선택기에서 패딩 속성을 정의해야 합니다.
다음은 각 면에 패딩을 적용할 수 있는 다섯 가지 속성입니다.
리눅스 디렉토리 이름 변경
나. 패딩-왼쪽:
요소에 왼쪽 패딩만 적용하려면 다음을 사용해야 합니다. 패딩 왼쪽 ID 선택기의 속성입니다. 그런 다음 다음 예와 같이 속성에 하나의 값만 설정해야 합니다.
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. 지금 테스트해보세요 padding-left 속성을 사용하는 위 코드의 출력은 다음 스크린샷에 표시됩니다.
ii. 패딩 오른쪽:
요소에 오른쪽 패딩만 적용하려면 다음을 사용해야 합니다. 패딩 오른쪽 ID 선택기의 속성입니다. 그런 다음 다음 예와 같이 속성에 하나의 값만 설정해야 합니다.
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. 지금 테스트해보세요 padding-right 속성을 사용하는 위 코드의 출력은 다음 스크린샷에 표시됩니다.
iii. 패딩 탑:
요소에 상단 패딩만 적용하려면 다음을 사용해야 합니다. 패딩탑 ID 선택기의 속성입니다. 그런 다음 다음 예와 같이 속성에 하나의 값만 설정해야 합니다.
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. 지금 테스트해보세요 padding-top 속성을 사용하는 위 코드의 출력은 다음 스크린샷에 표시됩니다.
iv. 패딩 바닥:
요소에 하단 패딩만 적용하려면 다음을 사용해야 합니다. 패딩 바닥 ID 선택기의 속성입니다. 그런 다음 다음 예와 같이 속성에 하나의 값만 설정해야 합니다.
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. 지금 테스트해보세요 padding-bottom 속성을 사용하는 위 코드의 출력은 다음 스크린샷에 표시됩니다.
v. 패딩:
네 면(위, 아래, 왼쪽, 오른쪽) 모두에 서로 다른 패딩을 적용하려면 패딩 속성에 네 가지 값을 지정해야 합니다.
padding: 10px 50px 75px 200px;
두 값을 지정하면 Html 편집기는 첫 번째 패딩을 위쪽과 아래쪽에 적용하고 두 번째 패딩을 왼쪽과 오른쪽에 적용합니다.
padding: 100px 50px;
padding 속성에 값만 지정하면 Html 편집기는 네 면 모두에 동일한 패딩을 적용합니다.
padding: 100px;
Padding 속성의 예:
예시 1: 다음 예제에서는 padding 속성에 하나의 값을 사용하여 네 면 모두에 동일한 패딩을 설정합니다.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. 지금 테스트해보세요 예제 1의 출력은 다음 스크린샷에 표시됩니다.
예 2: 다음 예에서는 심 반대쪽에 동일한 패딩을 설정하는 속성입니다.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. 지금 테스트해보세요 예제 2의 출력은 다음 스크린샷에 표시됩니다.
예시 3: 다음 예제에서는 padding 속성에 4개의 값을 사용하여 네 면 모두에 서로 다른 패딩을 설정합니다.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. 지금 테스트해보세요 예제 3의 출력은 다음 스크린샷에 표시됩니다.
