Блог

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

CSS | margin-top Property

Свойство margin-top в CSS используется для задания верхнего поля элемента. Он устанавливает область полей в верхней части элемента. Значение свойства margin-top по умолчанию равно 0.

Синтаксис:

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

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

  • длина: Он используется для указания длины маржи с фиксированным значением. Это значение может быть положительным, отрицательным или нулевым.

Синтаксис:

margin-top: length;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>margin-top property</title>
		
		<!-- margin-top CSS property -->
		<style>
			p {
				margin-top:50px;
				background-color:green;
			}
		</style>
	</head>
		
	<body style = "background-color:lightgreen;">
		
		<!-- margin-top property used here -->
		<p style = "">
			This paragraph has 50px top margin .
		</p>
	</body>
</html>

Выход:

  • процент (%): Используется для указания размера поля в процентах по отношению к ширине содержащего элемента.

Синтаксис:

margin-top: %;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>margin-top property</title>
		
		<!-- margin-top CSS property -->
		<style>
			p {
				margin-top:5%;
				background-color:green;
			}
		</style>
	</head>
		
	<body style = "background-color:lightgreen;">
		
		<!-- margin-top property used here -->
		<p style = "">
			This paragraph has 5% top margin .
		</p>
	</body>
</html>

Выход:

  • авто: Это свойство используется, когда верхнее поле определяется браузером.

Синтаксис:

margin-top: auto;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>margin-top property</title>
		
		<!-- margin-top CSS property -->
		<style>
			h3 {
				margin-top:auto;
				background-color:green;
			}
		</style>
	</head>
		
	<body style = "background-color:lightgreen;">
		
		<!-- margin-top property used here -->
		<h3 style = "">
			margin-top: auto;
		</h3>
	</body>
</html>

Выход:

  • начальный Он используется для установки свойства margin-top в значение по умолчанию.

Синтаксис:

margin-top: initial;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>margin-top property</title>
		
		<!-- margin-top CSS property -->
		<style>
			h3 {
				margin-top:initial;
				background-color:green;
			}
		</style>
	</head>
		
	<body style = "background-color:lightgreen;">
		
		<!-- margin-top property used here -->
		<h3 style = "">
			margin-top: initial;
		</h3>
	</body>
</html>

Выход:

  • наследование: используется, когда свойство margin-top наследуется от своего родителя.

Синтаксис:

margin-top: inherit;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>margin-top property</title>
		
		<!-- margin-top CSS property -->
		<style>
			.gfg {
				margin-top:100px;
			}
			h3 {
				margin-top:inherit;
				background-color:green;
			}
		</style>
	</head>
		
	<body style = "background-color:lightgreen;">
		
		<div class = "gfg">
			
			<!-- margin-top property used here -->
			<h3 style = "">
				margin-top: inherit;
			</h3>
		</div>
	</body>
</html>

Выход:

Примечание. Верхнее и нижнее поля элементов иногда сворачиваются в одно поле, равное наибольшему из двух полей. Это происходит не на горизонтальных (левых и правых) полях, а только в случае вертикальных (верхних и нижних) полей. Это называется крахом маржи.

Поддерживаемые браузеры: Браузер, поддерживаемый маржинальным свойством, указан ниже:

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