HTML margin-left는 요소의 왼쪽 여백 영역을 설정합니다. HTML에는 웹 페이지를 보다 효과적으로 생성하는 데 사용되는 미리 정의된 태그가 많이 있으며, 추가적으로 CSS 스타일은 웹 사이트에서 더욱 고급화되고 장식됩니다. 이 용어를 사용하면 사용자가 웹사이트를 더 자주 방문하게 되므로 비즈니스 관점에서 도움이 됩니다. HTML 여백 속성은 HTML 웹 화면의 외부 공간을 만드는 데 도움이 되는 기능 중 하나이며 추가적으로 margin-left, margin-right, margin-top 및 margin-bottom과 같은 다양한 유형이 있습니다. 웹 페이지의 개요 공간 레이아웃을 결정하는 몇 가지 유형입니다. 모든 유형에는 가능한 길이 값이 있습니다.
구문:
Html 여백은 문서에서 사용된 위치에 따라 스타일이 다릅니다. HTML 여백을 사용하면 CSS 스타일 문서가 여백으로 사용됩니다.
<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>위 코드는 웹페이지의 HTML 여백 스타일에 대해 논의할 기본 구문입니다. HTML에서 dom 패턴은 코드의 백엔드에서 작동하는 HTML 객체에 주로 사용됩니다. HTML 여백은 웹 페이지 문서에 적용되는 여백이 다른 요소에 따라 달라집니다. 자바스크립트 기능을 사용하여 웹페이지에서 자동으로 여백을 설정할 수 있습니다.
여백은 HTML 및 CSS 표준 스타일 단위를 사용하여 고정 길이를 지정합니다. 웹페이지에서는 음수 값도 허용됩니다. 그 전에 margin-left 속성에 몇 가지 값을 갖도록 설정하고 문서에 할당할 기본값이나 기본값을 모두 지정합니다. 기본값은 "auto"입니다. 그렇지 않으면 값을 "inherit", "length" 및 "percentage"로 선언합니다. 기반으로 하는 서로 다른 하위 값 세트가 있는 지정된 각 값은 margin-left 속성을 사용합니다. 가치가 있습니다.
길이는 CSS 단위의 길이 또는 고정 길이를 계산합니다. HTML 블록을 기반으로 너비와 높이의 백분율을 계산합니다. 이 필드에는 음수 값도 허용됩니다. 여백에 최상위 값 속성이 있다고 가정하면 사용자 브라우저는 값을 너비의 백분율로 사용합니다. 블록의 높이를 지정하지 않습니다.
사용자 브라우저는 왼쪽 여백 값을 자동으로 계산합니다. 이는 문서나 웹 페이지의 외부 영역에서 사용 가능한 공간에 따라 다릅니다. 상속 값은 주로 HTML 콘텐츠의 부모-자식 관계에 사용됩니다. 이는 margin-left 속성의 너비를 값으로 지정합니다. 웹 페이지에 있는 HTML 요소의 높이와 너비를 계산할 때 주로 해당 계산에 여백을 포함하지 않습니다. 패딩, 기타 콘텐츠 영역, 테두리 등과 같은 다른 HTML 요소를 포함합니다. 문서의 HTML 요소 여백 크기 속성의 사용 가능한 공간만 계산합니다.
HTML에서 충돌하는 두 개의 여백 세트를 선언한다고 가정해 보겠습니다. 예를 들어, 오른쪽 여백과 오른쪽에만 부동 소수점이 있는 블록 하나를 할당하고 부동 소수점과 동일한 왼쪽 여백이 있는 다른 블록을 할당합니다. 더 큰 마진 포인트는 변경되지 않고 더 작은 값으로 이동하지 않습니다. 이 경우 블록의 더 작은 여백 영역이 축소되어 웹 페이지에 올바르게 표시되지 않을 수 있으며 잠재적으로 웹 화면에서 사라질 수 있습니다. 일반적으로 여백은 투명합니다.
클러스터 코드에서 다른 여백 사양을 사용하는 대신 여백을 약식 속성으로 사용하여 너비를 지정합니다. 이 접근 방식은 개발자 영역에서 코드 읽기를 단순화합니다. 경우에 따라 다른 여백 유형과 마찬가지로 여백 하한 값을 설정할 수도 있습니다. 예를 들어 CSS 스타일에서 한 클래스를 다른 클래스와 구별합니다. HTML 태그 요소의 길이 값이 동일하고 텍스트 글꼴 및 요소 글꼴의 높이와 관련되어 있을 때마다 각 속성의 가능한 길이 값을 지정할 수 있습니다.
IE 4 이상 버전에서 웹 페이지에 개체를 추가하면 브라우저 사용 시 호환 모드에서 개체 여백에 대해 IE 버전 3의 기본값을 가정하지 않고 HTML 문서에서 여백 값이 절대값이 됩니다. 여백 속성 값은 HTML 테이블 요소
IE 4 버전의 태그.
다음은 HTML 왼쪽 여백의 예입니다.
코드:
<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>출력:
코드:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>출력:
코드:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>출력:
위의 세 가지 예는 여백 속성의 세 가지 다른 사용법을 제공합니다. 첫 번째 예에서는 CSS 스타일 및 HTML에 필수 여백 속성을 사용합니다. 두 번째 예에서는 HTML 테이블을 만들고 웹페이지의 margin-left 속성 값을 설정합니다. 마지막 예도 동일한 프로세스를 따르지만 JavaScript가 여백 값을 자동으로 설정합니다.
HTML에서는 여백 속성 유형이 margin-left로 표시됩니다. 이를 바탕으로 HTML 테이블, 이미지 및 비디오를 변경했습니다. 또한 HTML 문서에서 레이아웃을 왼쪽 여백으로 정렬하고 설정하겠습니다. 일부 요소는 브라우저 호환성에서 HTML5를 지원하지 않습니다.
위 내용은 HTML 여백-왼쪽의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
