HTML 패딩
일반적으로 Padding은 HTML에서 HTML 콘텐츠와 테두리 사이의 공간을 의미하는 것과 마찬가지로 사물 사이의 공간입니다. HTML 패딩은 웹페이지를 더욱 매력적으로 활용하고 웹사이트를 강조하기 위한 속성이기도 합니다. 또한 padding-top, padding-left, padding-right, padding-bottom 등과 같은 일부 유형도 있습니다. 비슷한 유형의 패딩 형식으로 단어나 텍스트를 정렬할 수 있습니다. Padding은 HTML 요소 내에 추가 공간을 만들고, 여백도 HTML 요소를 위한 추가 공간을 만듭니다. 또한 모든 패딩 영역에 CSS 스타일과 해당 속성을 사용합니다.
구문:
각 HTML 태그에는 요소의 특성과 속성이 있습니다. 마찬가지로 구문도 다르며 사용자 요구 사항에 따라 다른 모든 HTML 태그에 사용됩니다. 다음은 HTML의 패딩 요소의 기본 구문입니다.
<html>
<head>
<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>
</head>
<body>
</body>
</html>위 구문은 샘플 웹페이지를 생성하는 데 도움이 되며 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
코드:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<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>
</body>
</html>출력:
Example #2
Code:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<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>
</body>
</html>Output:
Example #3
Code:
<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<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>
</body>
</html>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까?
Feb 07, 2025 am 11:57 AM
이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
