Блог

Главная - CSS язык разметки - CSS | margin-left Property
You are currently viewing CSS | margin-left Property

CSS | margin-left Property

Свойство margin-left в CSS используется для установки ширины поля слева от нужного элемента. Допускаются отрицательные значения этого свойства.

  • Положительное значение используется, когда желательно, чтобы маржа находилась дальше от своих соседей.
  • Отрицательное значение используется, когда требуется, чтобы поле было расположено ближе.

Синтаксис:

margin-left: length|auto|initial|inherit;

Значение по умолчанию : Его значение по умолчанию равно 0.

Значения свойств:

  • length (длина): Задает фиксированное значение, определенное в пикселях, см, пт. Допускаются отрицательные значения, как упоминалось ранее. значение по умолчанию-0 пикселей.
margin-left: 15px;

Пример 1:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<p style = "margin-left:15px; border-style:solid ;
				border-color:black;">
		This paragraph has 15px margin .
	</p>
</body>
</html>

Пример 2:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<p style = "margin-left:20%; border-style:solid ;
				border-color:black;">
		This paragraph has 20% margin .
	</p>
</body>
</html>
  • auto (авто): Используется, когда требуется, чтобы браузер определял ширину левого поля.
margin-left: auto;

Пример:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<p style = "margin-left:auto; border-style:solid ;
				border-color:black;">
		This paragraph has auto margin .
	</p>
</body>
</html>
  • initial (первоначальный): Он используется для установки значения свойства margin-left по умолчанию.
margin-left: initial;

Пример:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<p style = "margin-left:initial; border-style:solid ;
				border-color:black;">
		This paragraph has initial margin .
	</p>
</body>
</html>
  • inherit (наследовать): Он используется, когда требуется, чтобы элемент наследовал свойство margin-left своего родителя как собственное.
margin-left: inherit;

Пример 1:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<div style="margin-left:50px;">
	<p style = "margin-left:inherit; border-style:solid ;
				border-color:black;">
		This paragraph has auto margin .
	</p>
	</div>
</body>
</html>

Пример 2:

<html>
<head>
	<title>
		CSS | margin-left Property
	</title>
</head>
	
<body>
	<p style = "margin-left:auto; border-style:solid ;
				border-color:black;">
		This paragraph has auto margin .
	</p>
		
	<p style = "margin-left:10px; border-style:solid ;
				border-color:black;">
		This paragraph has 10px margin.
	</p>
	<br>
		
	<p style = "margin-left:5%;border-style:solid;
				border-color: black;">
		This paragraph has 5% margin.
	</p>
	<br>
		
	<p style = "margin-left:15px; border-style:solid;
				border-color: black;">
		This text has an margin of 15px.
	</p>
	<br><br>

	<p style = "margin-left:initial;border-style:solid;
				border-color: black;">
		This text has a margin of default
		typeset by initial
	</p>
</body>
</html>

Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые свойством margin-left:

  • Google Chrome 1.0
  • Internet Explorer 6.0
  • Opera 3.5
  • Firefox1.0
  • Safari 1.0
Метки: