HTML 패딩

일반적으로 Padding은 HTML에서 HTML 콘텐츠와 테두리 사이의 공간을 의미하는 것과 마찬가지로 사물 사이의 공간입니다. HTML 패딩은 웹페이지를 더욱 매력적으로 활용하고 웹사이트를 강조하기 위한 속성이기도 합니다. 또한 padding-top, padding-left, padding-right, padding-bottom 등과 같은 일부 유형도 있습니다. 비슷한 유형의 패딩 형식으로 단어나 텍스트를 정렬할 수 있습니다. Padding은 HTML 요소 내에 추가 공간을 만들고, 여백도 HTML 요소를 위한 추가 공간을 만듭니다. 또한 모든 패딩 영역에 CSS 스타일과 해당 속성을 사용합니다.

구문:

각 HTML 태그에는 요소의 특성과 속성이 있습니다. 마찬가지로 구문도 다르며 사용자 요구 사항에 따라 다른 모든 HTML 태그에 사용됩니다. 다음은 HTML의 패딩 요소의 기본 구문입니다.

<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>

위 구문은 샘플 웹페이지를 생성하는 데 도움이 되며 HTML의 헤드 섹션에 CSS 스타일의 패딩 스타일을 사용합니다. 이에 따라 HTML의 다른 섹션과 태그에서 이를 사용하면 구문이 달라집니다.

HTML에서 패딩은 어떻게 작동하나요?

여백에 비해 패딩은 일부 HTML 요소 내부에 추가 공간이 생성되지만 여백은 HTML 요소 외부에 만들어집니다. Padding 및 margin과 같은 각 요소는 HTML 컨테이너의 상자 모델과 결합된 Padding, margin 및 border인 상자 모델을 나타냅니다. 해당 모델에서는 사용자가 웹 페이지에서 맞춤형 개발이 필요한 경우 HTML 콘텐츠, 즉 텍스트 또는 이미지, 비디오 등에 사용되는 영역의 중간 부분을 패딩, 여백 및 테두리로 둘러쌉니다.

이 모든 것을 필요에 따라 사용하지는 않지만 상자 모델이 웹 페이지의 모든 태그나 요소에 적용된다는 점을 기억하는 것이 좋습니다. 일부 CSS 스타일 및 속성은 속성 수로 대체되는 값 문자열을 허용하며 공백을 사용하여 구분된 값으로 표시됩니다.

내부 여백 및 테두리 영역과 HTML 콘텐츠 영역 외부가 있는 상자 내부 패딩인 패딩 속성은 상자 컨테이너에서 균일한 패딩 스타일을 지정하는 데 사용됩니다. 3개 또는 4개의 값은 고객 요구 사항이 포함된 코드 선언에 따라 독립적으로 지정됩니다.

패딩의 길이를 계산할 때 고려해야 할 특정 허용 값이 있으며, 이 값이 음수가 아닌지 확인해야 합니다. 또한 상자 너비와 높이를 포함하고 음수 값이 없는 백분율을 계산합니다. 이미지와 HTML 컨텐츠와 같은 데이터 스트림 사이에 버퍼를 생성하여 HTML의 웹 페이지에 대한 이미지 측 패딩을 사용할 수 있습니다. 숨쉴 공간이 거의 없는 것처럼 이미지를 제공하므로 텍스트나 다른 이미지가 막히지 않습니다.

우리는 일반적으로 웹페이지 왼쪽에 이미지를 배치하여 데이터 콘텐츠를 밀접하게 첨부합니다. 사진에 산만하게 가까운 것이 없습니다. 그러나 오른쪽 패널에서 동일한 이미지를 사용할 때 Padding은 이미지와 텍스트 사이에 버퍼를 생성합니다. 사용자 입장에서는 즐거운 독서 경험에 도움이 될 것입니다. 일부 스타일 속성이 포함된 HTML 편집기와 같은 편집 작업을 사용하여 이미지 캔버스에 패딩을 추가하고 사용자가 이미지를 선택한 후 서식 있는 텍스트 편집기로 전환할 수도 있습니다.

우리는 사용자 또는 클라이언트 지침에 따라 웹 페이지에 이미지 콘텐츠로 선택하거나 업로드하는 이미지의 모든 면에 10픽셀 테두리와 같은 선택적 패딩을 추가합니다. 또한 사용자 요구 사항에 따라 padding-bottom 옵션과 padding-right 등 일부 패딩 스타일을 사용하여 선택적으로 Padding을 추가할 수도 있습니다.

4가지 패딩 값

HTML 코드에서 자바스크립트 함수를 호출한 후 자바스크립트 함수에서 Padding을 사용하면 테두리 스타일이나 패딩 스타일을 자동으로 생성하고 크기를 조정할 수 있습니다. 일반적으로 패딩 속성은 속성이 단일 값에서 최대 4개의 값까지 가져오는 HTML 요소의 패딩을 설정하거나 반환합니다. 아래에서 각 패딩 값에 대해 논의하겠습니다.

• 단일 값: div{padding:12px}와 같은 예 - HTML 콘텐츠의 네 변 모두 12px와 같은 패딩 값을 갖습니다.
• 두 값: div{padding:12px 13px} - 상단 및 하단 패딩은 12px, 왼쪽 및 오른쪽 패딩은 13px입니다.
• 세 가지 값: div{padding:12px 13px 14px} - 상단 Padding은 10px, 왼쪽 및 오른쪽 Padding은 13px, 하단 Padding은 14px입니다.
• 4개 값: div{padding:12px 13px 14px 15px}-top Padding은 12px, 오른쪽 Padding은 13px, 아래쪽 Padding은 14px, 왼쪽 Padding은 15px입니다.

HTML 패딩의 예

HTML Padding의 예는 다음과 같습니다.

예시 #1

코드:

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

출력:

Example #2

Code:

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<img  src="/static/imghwm/default1.png" data-src="download.jpg" class="lazy"   style="max-width:90%" alt="HTML 패딩" >
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

Output:

Example #3

Code:

<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>

Output:

The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.

Conclusion

We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.

위 내용은 HTML 패딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!