Блог

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

CSS | padding-right Property

Padding — это пространство между его содержимым и его границей. Свойство padding-right в CSS используется для задания ширины области заполнения справа от элемента.

Синтаксис:

padding-right: length | percentage | initial | inherit;

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

  • length (длина): Этот режим используется для указания размера заполнения в качестве фиксированного значения. Значение по умолчанию равно 0. Оно должно быть неотрицательным.

Синтаксис:

padding-right: length;

Пример: 

<!DOCTYPE html>
<html>
	<head>
		<title>
			padding-right Property
		</title>
		
		<style>
			.geek {
				padding-right: 200px;
				color: white;
				background: green;
				width:50%;
				font-size:18px;
			}
		</style>
	</head>
	
	<body style = "text-align:center">
		<h1 style = "color: green;">
			GeeksforGeeks
		</h1>
		
		<h2>
			padding-right Property
		</h2>
		
		<!-- padding-right property used here -->
		<p class = "geek">
			This paragraph has a padding-right: 200px;
		</p>

	</body>
</html>

Выход:

  • percentage (процент): Этот режим используется для установки правильного заполнения в процентах от ширины элемента. Оно должно быть неотрицательным.

Синтаксис:

padding-right: percentage;

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>
			padding-right Property
		</title>
		<style>
			.geek {
				padding-right: 40%;
				color: white;
				background: green;
				width:50%;
				font-size:18px;
			}
		</style>
	</head>
	
	<body style = "text-align:center">
		<h1 style = "color: green;">
			GeeksforGeeks
		</h1>
		<h2>
			padding-right Property
		</h2>
	
			<!-- padding-right property used here -->
		<p class = "geek">
			This paragraph has a padding-right: 40%;
		</p>

	</body>
</html>

Выход:

  • initial (начальное): Это свойство используется для установки значения по умолчанию.

Синтаксис:

padding-right: initial;

Пример: 

<!DOCTYPE html>
<html>
	<head>
		<title>
			padding-right Property
		</title>
		
		<style>
			.geek {
				padding-right: initial;
				color: white;
				background: green;
				width:70%;
				font-size:25px;
			}
		</style>
	</head>
	
	<body style = "text-align:center">
		<h1 style = "color: green;">
			GeeksforGeeks
		</h1>
		
		<h2>
			padding-right Property
		</h2>
		
		<!-- padding-right property used here -->
		<p class = "geek">
			This paragraph has a padding-right: initial;
		</p>

	</body>
</html>

Выход:

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

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