HTML 패딩과 여백-HTML 튜토리얼-php.cn

HTML 패딩과 여백의 정면 비교(인포그래픽)

HTML 패딩과 여백의 주요 차이점

HTML 패딩과 마진 비교표

예 #1 – HTML 패딩

예 #2 – HTML 여백

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 패딩과 여백

王林

Sep 04, 2024 pm 04:19 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML에서 여백과 패딩은 HTML 콘텐츠의 요소 간격을 지정하는 데 사용되는 두 가지 요소입니다. 여백은 HTML 요소의 외부 공간이고 패딩은 요소의 내부 공간이지만 두 개념 모두 HTML 요소의 공간 복잡성을 대상으로 합니다. 모든 HTML 요소 태그 세트는 패딩과 여백을 활용하여 속성과 동작을 정의합니다. 또한 웹페이지와 같은 HTML 문서가 사용자 관점에서 더욱 매력적으로 보일 수 있는 방법을 인식합니다.

HTML 패딩과 여백의 정면 비교(인포그래픽)

다음은 HTML Padding과 Margin의 상위 6가지 비교입니다:

HTML 패딩과 여백

HTML 패딩과 여백의 주요 차이점

다음 사항에서 HTML 패딩과 여백의 주요 차이점을 살펴보겠습니다.

HTML 패딩 및 여백은 HTML 요소의 공백 및 테두리와 관련된 두 가지 속성을 나타냅니다. 패딩과 여백은 모두 CSS 스타일에 사용됩니다. 두 속성 모두에 CSS 스타일을 사용하면 각각의 동작이 나타납니다.
사용자는 사용자의 요구에 따라 요소 내부에 공간을 확보하기 위해 특정 요소를 패딩 속성과 연결해야 합니다. 여백 역시 패딩과 동일하지만, 웹 페이지의 경우 사용자 사양에 따라 문서의 바깥쪽에 공백이 있습니다.
HTML 문서의 여백 유형을 지정하면 여백은 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 다양한 유형이 있습니다. HTML 여백과 패딩에 CSS 스타일을 사용하면 웹페이지에서 더욱 강력해집니다.
요소 상단의 HTML margin-top 값 설정은 길이 또는 백분율로 지정되어야 합니다. 하위 값은 HTML 콘텐츠의 8개인 상위 요소 너비를 지정하고 참조합니다. HTML 테이블 기능에서는 셀 패딩, 셀 간격 등 다양한 유형이 있는 HTML의 패딩을 사용합니다.
HTML 표에서 셀 패딩 및 셀 간격 값을 설정하면 표의 CSS 속성에 가로 및 세로 공간이 모두 지정됩니다. 때때로 셀 간격 속성은 7,8,9 등과 같은 Internet Explorer 버전에서 작동하지 않습니다. cell-spacing 대신 border-spacing 속성을 사용하면 사용자 호환성 모드를 향상시킬 수 있습니다. border-spacing 속성에는 null 값이 지정되어 있으며, 다른 잠재적인 값도 수용할 수 있어 셀 간격 속성에 더 유리합니다.
HTML 테이블의 속성 값은 셀 간격, 테두리 간격 및 테두리 접기의 기본 예라고 언급할 수 있습니다. 이는 프런트 엔드에서 더 많은 매력을 주기 위해 HTML 테이블에서 사용하는 것과 동일한 속성입니다.
이를 바탕으로 동일한 HTML 테이블의 패딩 및 여백 공간에 대해서도 언급합니다. 또한
태그는 HTML에서 사전 정의된 태그로 사용되지만 가능하면 사용자 화면에서 중첩된 div 태그의 패딩 공간과 여백 공간도 사용합니다.
HTML 테이블에서 div 태그를 사용할 때 테이블 셀에 데이터를 래핑하지만 HTML 테이블의 div 태그에서 패딩 공간과 여백 공간을 선언하면 열의 모든 테이블 셀이 유니폼 또는 프런트 엔드 화면에서 오름차순 형식이어야 합니다.

HTML 패딩과 마진 비교표

아래 표에는 HTML 패딩과 여백의 비교가 요약되어 있습니다:

HTML Padding	HTML Margins
It is used to create the space inner side of the web pages in the HTML contents.	The outer side of the HTML contents in the web pages is declared using it.
It has different types like top, bottom, left and right paddings.	There are various types of margins, including top, bottom, left, and right margins.
It is mainly used for the CSS styles on the web pages.	Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages.
It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages.	It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements.	The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents.
We can use javascript to set the padding sizes in the web pages automatically.	We also use Javascript to set the margin length on the web pages automatically.

HTML 패딩 및 HTML 여백

의 예

다음은 HTML 패딩 및 HTML 여백의 예입니다.

예 #1 – HTML 패딩

코드:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</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 = "22px 23px";
}
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 패딩과 여백

위 예에서는 자바스크립트를 사용하여 웹페이지의 패딩 크기를 자동으로 설정했습니다. "to mydomain" 아이콘을 클릭하면 패딩 크기가 정렬됩니다.

예 #2 – HTML 여백

코드:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 패딩과 여백

위의 동일한 예에서는 버튼을 클릭할 때 자동으로 여백 값을 설정하기 위해 javascript 함수를 사용합니다.

결론

HTML 패딩과 여백은 시각적으로 매력적인 웹페이지를 만들고 프런트 엔드 패널에 형식적인 스타일을 적용하는 데 중요한 구성 요소입니다. 유연해야 하는 전문적인 콘텐츠에 중점을 두고, 사용자 입력 값이 백엔드와 프런트엔드에서 적절하게 정렬되도록 플롯합니다. Javascript와 Bootstrap 및 jquery 라이브러리와 같은 기타 프레임워크가 이러한 HTML 요소와 결합됩니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.