HTML 여백-왼쪽-HTML 튜토리얼-php.cn

HTML 여백 왼쪽은 어떻게 작동하나요?

HTML 왼쪽 여백의 예

예시 #3

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 여백-왼쪽

王林

Sep 04, 2024 pm 04:48 PM

html html5 HTML Tutorial HTML Properties HTML tags

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 여백 왼쪽은 어떻게 작동하나요?

여백은 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에서는 작동하지만 IE 3에서는 작동합니다.

또는

IE 4 버전의 태그.

HTML 왼쪽 여백의 예

다음은 HTML 왼쪽 여백의 예입니다.

예시 #1

코드:

<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 여백-왼쪽

예시 #2

코드:

<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 여백-왼쪽

예시 #3

코드:

<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>

로그인 후 복사

출력:

HTML 여백-왼쪽

위의 세 가지 예는 여백 속성의 세 가지 다른 사용법을 제공합니다. 첫 번째 예에서는 CSS 스타일 및 HTML에 필수 여백 속성을 사용합니다. 두 번째 예에서는 HTML 테이블을 만들고 웹페이지의 margin-left 속성 값을 설정합니다. 마지막 예도 동일한 프로세스를 따르지만 JavaScript가 여백 값을 자동으로 설정합니다.

결론

HTML에서는 여백 속성 유형이 margin-left로 표시됩니다. 이를 바탕으로 HTML 테이블, 이미지 및 비디오를 변경했습니다. 또한 HTML 문서에서 레이아웃을 왼쪽 여백으로 정렬하고 설정하겠습니다. 일부 요소는 브라우저 호환성에서 HTML5를 지원하지 않습니다.

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

본 웹사이트의 성명

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